Implist | 個人プロダクト開発を加速させるための理論と実装

STUDIOの文字装飾テクニック5本ノック!


STUDIOの便利な画像操作5本ノック!
STUDIOで作るWebサイト☆必見SEO対策4選

STUDIO操作の基本として文字装飾はマスターしておきたいところです。これまで学習した、ボックスモデル画像操作に加えてこの文字装飾ができるようになれば、STUDIOの基本はほぼOKといってよいでしょう。

文字の色・大きさ・シャドウといった「スタイル設定」、文章としてのレイアウトである「段組み」、そしてリンク・アニメーションなど「動き」をつける方法を学びます。

ここまで学べば、シンプルなWEBサイトであれば、十分に機能するものが作れますよ!

本記事で学ぶ内容
1、STUDIO 文字の装飾方法
2、STUDIO 文字のフォントを変える方法
3、STUDIO 文章の配置(右寄せ・左寄せ…)と文字組み(縦書き・横書き)の指定方法
4、STUDIO 文字にリンクを付ける方法
5、STUDO 文字にアニメーションをつける方法

STUDIO 文字の装飾方法(大きさ・色・シャドウ)

では、まず画面左の「T」アイコンからドラッグ&ドロップでテキストボックスを挿入します。このようにテキストを選択した状態にすると、スタイルバー(画面上部)に「テキスト」というタブが現れます。

このスタイルバーの「テキスト」タブから「文字間」「行間」「サイズ」「フォント」「太さ」「イタリック(斜体)」「下線」「色」「シャドウ」が設定できます。

本章では、WEBサイトを作成する上で必ず必要になる「文字サイズの調整」「文字色の変更」「文字にシャドウをつける」方法をピックアップしてご紹介します。

STUDIO 文字サイズの調整

スタイルバーの「サイズ」にカーソルを合わせると、文字サイズの選択肢が現れます。選択肢は10から288ポイントですが、288ポイントより大きな数字も、直接数字を打ち込むことで適用することができます。なお、10.5などの小数点のあるサイズは表せません。

STUDIO 文字色の調整

スタイルバーの左はしの方に、「色」と書かれた項目がありますね。これをクリックすると、下図のようなメニューが展開されます。

メニューは5つの項目で構成されています。順に見ていきましょう。

(図中)①は、色を登録する機能です。よく使う色を登録しておくことで、都度カラーコードを入力せずに、色を呼び出すことができます。「+」をクリックすると、今表示されているカラーコードの色が登録されます。

②はカラーコードです。16進数モードとRGBモードを切り替えることができます。ここに直接、英数文字を入力して色を指定することもできます。

③は透明度の設定です。向かって一番左が透明度0.0(完全に透明)、一番右が透明度1.0(完全に不透明)になります。現在は、「完全に不透明」に設定されています。このバーの中の白丸を動かすことで設定できます。

④で「色相」、つまり赤、緑、黄色、ピンク…などの色を決めます。

⑤のパネルで、先ほど決めた色に対し、「彩度(鮮やかさ)」「明度(明るさ)」を決めます。⑤のパネルを見た時、上下方向が明度(下にいくほど暗くなる)、左右が彩度(右に行くほど鮮やか)です。ここで選択されている色は③のカラーコードに自動で反映されます。

STUDIO 文字にシャドウをつける

「色」の隣の項目に「シャドウ」があります。これをクリックすると、同じようにメニューが展開されます。

メニュー内にはいくつかデフォルトで、よくあるシャドウのパターンが登録されています。ご自分で「X」「Y」「Blur(ぼかし)」を調整して、影の位置やぼかし度を調整することもできます。

また、colorから、シャドウ部分の色を選択できます。

STUDIO 文字のフォントを変える方法

フォントを変えたい文字を選択し、スタイルバーの「フォント」にカーソルを合わせましょう。デフォルトの選択肢が現れます。最初は選択肢が少ないです…が、ここでがっかりしてはいけません!!

「+」をクリックしてみましょう。

画面右側に、フォントメニューが展開されます。ここから、なんと「Google Fonts」「TypeSquare」にアクセスし、フォントを適用できるのです!

好みのフォントが見つからない場合は、検索窓かキーワードを入れて検索することもできます。また、アイコンからは「明朝体」「ゴシック体」「筆記体」または「手書き風文字」など別に検索することができます。

「styles」をクリックすると、そのフォントが対応しているスタイル(ふと文字、イタリックなど)を展開し、選択できるようになります。

STUDIO 文章の配置・文字組を変更する方法

STUDIOで文章を入力したときに、(Wordファイルの文章ように)「右揃え」「左揃え」「中央寄せ」などを変更するにはどうすればよいでしょうか。

そんなときは、配置を変えたいテキストのエリアをクリックして「選択された状態」にし、画面上部スタイルバーの「テキスト」タブから変更を行えます。

「両端揃え」にすると、テキストボックスの幅いっぱいに文章が広がります。ちょっと余白がほしいときは、「テキスト」タブから「ボックス」タブに切り替えてパディングをつけるなどして、うまく調整してみてください!

さらに、「縦書き」「横書き」といった「文字組み」を変更したいときは、先ほどの「配置」のとなりのアイコンから指定することができます。

STUDIO 文字にリンクを付ける方法

この章では、STUDIOを使ったWEBサイトで、ページ内リンクおよび外部サイトリンクをつける方法をご紹介します。

STUDIO 内部リンクを設定する

例として、以下のようなWEBサイトを想定します。

まず、リンクから、同じページの別の場所に移動する方法をご説明します。「お問い合わせはこちら」という文字をクリックすると、同ページ下部の「お問い合わせブロック」に飛ぶよう設定してみます。

STEP1 リンク先(今回は黄色で示した「お問い合わせブロック」)にIDをつけます。

今回は2ブロック先のエリアにある「お問い合わせ」という文字にID名(今回は#contantとしています)をつけました。

STEP 2 リンクをつけたい文字(今回は最初のセクションの「お問い合わせはこちら」)にリンクを付けます。

画面右のメニューから「リンク」➔「ページ」を選択します。そして「ページを検索」という窓内をクリックすると、ページ内の各要素のIDが選択肢として現れます。リンクさせたい先(今回はSTEP1で設定した #contact)を選んでクリックしましょう。

ページが複数ある場合、サイト内の他のページをリンク先として設定することもできます。

これで、内部リンクが設定できました。しっかりリンクが機能しているかどうか不安な時は、ライブプレビューから確認してみましょう。

STUDIO 外部サイトのリンクを設定する

外部サイトのURLをリンク先として設定するには、どうすればよいでしょうか。

先ほどと同じように、「お問い合わせはこちら」を選択した状態で、画面右のメニューを展開し、「リンク」の項目を設定します。今回は、「ページ」ではなく「URL」を選択してください。

ここに、リンク先のURLをコピペしましょう。

リンクが機能しているか、プレビューで確かめたら、完了です!

STUDO 文字にアニメーションをつける方法

STUDIOのアニメーションは、設定次第でかなり複雑なものを作ることもできますが、今回はシンプルに、マウスをホバーすると文字が大きくなるパターンを解説します。

まず、アニメーションをつけたい文字をクリックして選択された状態にし、スタイルバーの「モーション」タブを開きます。

画面右端の「条件付きスタイル」から「ホバー」を選択します。「ホバー」が選択された状態で、「モーション」を設定すると、ホバーしている間はこの動きをしますよという設定ができるのです。

なお、「出現時」を選ぶと、そのページ(またはセクション)を開いたタイミングでアニメーションが開始します。

次に、選択した文字にどんな動きをつけたいかを設定します。

「イージング」「時間」「遅延」は、アニメーションが進行する時間や速度に関する設定です。そして、「移動」「回転」「スケール」「傾き」は、要素がどんな動きをするかを設定するものです。

今回は、ホバー中は文字を大きくするという設定にしたいので、「条件付きスタイル」「ホバー」になっている状態で、スケールをX(横)、Y(縦)ともに2(2倍)と入力します。

そして、「時間」で動作開始から終了までの(時間的な)長さ「遅延」でアニメーション開始までの遅れ時間「イージング」で動作速度のパターンを設定します。

「イージング」はなかなかイメージが難しいので、ご自身で設定を変えて色々と試してみるのがおすすめです。

「イージング」について、今回の「文字が大きくなる」という動作を例にもう少し説明を加えます。イージングは、設定時間内での要素の動き(今回は「拡大」という動き)について、「等速で要素が拡大する」か、「最初じわじわ動いた後、急にバンっと大きくなる」または「バンっと大きくなってから、ゆっくりと最終的な大きさに落ち着く」などといった速度の緩急に関するパターンを指定していると理解しましょう。

いかがでしたか?

文字の装飾、動きをマスターすることで、「基礎編」から一歩進んだ、オリジナリティあるWEBサイトが作れるようになったかと思います。

機能をどんどん活用して、思い通りのデザインをSTUDIOで実現しましょう!

STUDIOの便利な画像操作5本ノック!
STUDIOで作るWebサイト☆必見SEO対策4選