WEB業界で働く人や興味がある人に役立つ情報サイト“qam(カム)”

もの

2018/05/18

フラットデザインにも使える!アーチ型テキストを作ってみよう

投稿者: もの
カテゴリー: デザイン >WEBデザイン

今回は、好きな形に沿って文字を配置する方法をお伝えします。
他にも方法はありますが、ご紹介するのは一番簡単で、後から調整のきくやり方です。

アーチ型を覚えると便利!

基本的に、シェイプを使って作るものなので、シェイプさえ作れればどんな文字の並びも可能です。
ただ、あまりに奇抜な形で文字が並んでいても、読みづらいですよね。
そこで、一番使えるアーチ型に文字を並べる方法でいきましょう。

まず、文字を沿わせる土台になるアーチ型のシェイプを作ります。
アーチ型のシェイプを作ってももちろん良いですが、デフォルトですぐに作れる円で問題ありません。
今回は、円で進めます。

そうしたら「パス選択ツール(ショートカット[A])」にしてから、Altを押しながら円のどこかをクリックします。すると、シェイプのフチ線とパスが表示されます。

この状態で、「文字ツール(ショートカット[T])」に切り替えます。文字を左右・中央どこで揃えるのかも、ここで設定しておくと良いです。今回は中央揃えで進めます。
シェイプのフチのどこか、文字を打ち始めたいところをクリックします。
このとき、「I」カーソルの真ん中に波線が出ている状態でクリックしましょう。
今回は上の画像のようなものを作りたいので、円の頂上でクリックします。

その状態で実際に文字を打ってみましょう。円に沿って文字が表示されていたらOKです!

このとき、最初に作ったシェイプと、それに沿って打った文字とは別物(別レイヤー)になっています。ここからは、文字レイヤーだけを編集していきます。

文字の位置を変えたいときは?

今回のような形なら位置を合わせやすいですが、文字を打ってみたら思った位置に収まらなかった…ということもあります。
こういうときは、文字の開始位置をあとから変えることができます。

文字のレイヤーを選択している状態で「パス選択ツール」にします。すると、文字の土台になっているシェイプの形の線が表示されます。
ここで、シェイプの線上で[Ctrl]を押します。するとカーソルに矢印が表示されますので、そのままCtrlを押しながらクリックします。

縦線が2本出てきますね。この状態でドラッグすると、文字の位置を調整できます!

アーチの形を調整したいときは?

文字の位置ではなく、アーチの曲がり具合やサイズを変えることもできます。
文字を打ってみたら長すぎて不恰好なので、もう少しアーチをなだらかにしたい、といったときに使えます。
なお、文字数が少ないときは急なアーチ(小さい円)、多いときはなだらかなアーチ(大きい円)であらかじめ作ると良いです。

ここでも、文字のレイヤーを選択している状態で「パス選択ツール」にし、シェイプの形の線を表示します。
そうしたら、[Alt]を押しながら円のどこかをクリックします。
この状態で、[Ctrl]+[T]をしてみましょう。

これで、土台のシェイプの形を変えられます。

ここで1つ注意したいことがあります。上に書いた、「[Alt]を押しながら円のどこかをクリック」ということをしないまま、全体のサイズを調整してしまうと、文字自体のサイズも変わってしまいます。

全体にサイズを変えたいときはそれでOKですが、文字サイズを変えずに配置だけ調整したいときは、この手順を守って作業しましょう。

文字をアーチの内側にしたいときは?

上の手順で作った文字を、土台のアーチの内側に移動することもできます。
「パス選択ツール」のボタンを長押しすると、「パスコンポーネント選択ツール」という選択肢が出てきます。

これを設定すると、カーソルが黒矢印になります。
その状態で、文字をシェイプ線の内側へグイッと引っ張るようにドラッグします。すると、上下反転して内側に文字が移動します。

反転していては使いにくいので、使える形にしてみましょう。
この作業をする前に、Ctrlを押しながらクリック→ドラッグでまず文字を下に移動します。

文字は上下逆さまになっていますね。
これで、先ほどと同じく内側へグイッとドラッグします。

逆さまの逆さまで、読める向きの状態で内側に入りました!

これで、こんな配置も可能です。

流行のデザインとも相性ぴったり

アーチ型に文字が並んだあしらいを入れるデザインは、最近よく見かけます。私が見つけた、アーチ文字を使ったサイトを少しご紹介します。

ぷるぷるスパークリングゼリー
キービジュアルに使用。女子向けサイトです。

FAMILY OUTDOOR まめ知識
見出しに使用。手書き風の装飾と相性が良いですね。

ハピスタ
こちらも見出しに使用。いろいろなパターンがあって、どれも真似してみたいです!

シンプル&フラットなデザインに足すとほどよくオシャレ感や親しみ感が出るので、飲食系、ファッション系や若者・女性・子ども向けデザインに良いのではないでしょうか。ぜひ試してみてくださいね。

最後までお読みいただき、ありがとうございました。
よろしければシェアしていただければ幸いです。

  • このエントリーをはてなブックマークに追加

関連記事

よろしければこちらの記事もお読みください。

WEB業界ならqam!qam(カム)はWEB業界で働く人や興味がある人に役立つ情報サイトです。
マーケティングやデザイン、マークアップ(コーディング)、プログラム、トレンドなどの情報をqamライター陣が執筆。噛めば噛むほど(読めば読むほど)制作・開発や運営・運用、業界知識やノウハウを学ぶことができます。

トップへ