[dropcap]A[/dropcap]dobe Fontをご存じでしょうか。デザインを構成する要素として侮れないのがフォントです。フォント次第でデザイン的にも見栄えがチープになりますし、何よりも一番重要な読み手に対して意図した期待効果を実現できないという事態は避ける必要があります。紙媒体であれば、ノンデザイナーでもパワーポイントやキーノートのフォントからいろいろと選択できると思いますし、デザイナーの方々もフォトショやイラレにより、より多様に活用することができます。
ホームページのフォントはどうすればいいか？
それではホームページの場合はどうでしょうか。デザイナーであればフォトショやイラレでフォントを画像に起こして、使用するといった昔ながらの定番のやり方もあります。しかし、その場合ホームページの制作者がaltに文字を入れる等の対応をしないと文字が読み取れないので、ささいなことかもしれませんが、SEO的にも悪といえば悪です。またオペレーション的にも変更するたびに書き出して設置しては面倒ですよね。レスポンシブデザインが主流であることを感がると更なる手間が発生し、内製では無駄な人件費に繋がります。
Webフォントとは？
オルタナティブな方法として、オンライン上にストックされており、リンクをつなげることで多様なフォントが使用できるWebフォントがあります。無料で使える有名どころでは、知の神様であるGoogle先生のGoogle fontがありますが、今回はデザインの神様であるAdobe先生のAdobe Fontを使用する方法を説明します。
Adobe Fontsの設定方法
Adobe Fontsにアクセス
まずはAdobe Fontsの公式サイトにアクセスしましょう。ログインしたら左上の「フォント一覧」をクリックします。
[button color=”orange” size=”medium” link=”https://fonts.adobe.com/” icon=”” target=”true”]Adobe Fonts 公式サイト[/button]
フォントの絞り込み
フォント一覧画面に遷移するので、左のフィルター等で探しているフォントに近いものをフィルタリングしていきましょう。コレだと思うものを見つけたら「ファミリーを表示」をクリックします。
フォントをアクティベート
フォントの個別ページに遷移するので、右上にある「1個のフォントをアクティベート」をクリックします。
そうすると完了画面が表示されるのでOKをクリックします。
Webフォント設定
個別フォントのページに戻るので、右下にある「</>Webプロジェクトに追加」をクリックします。
プロジェクト入力欄に遷移するので任意で入力して作成を押しましょう。
コピペしてホームページにコードを反映
フォントコード画面が表示されました。これであとは対象のホームページの<head>に上段のコードを、CSSに下段のコードを反映させるだけで完了です。
さて、いかがでしたでしょうか。デザインは奥が深いですよね。フォントパワーでブランディングやメッセージグを強化していきましょう。
