ウェブ入門の続き：ウェブサイトをどんな外見にするか
1.2 ウェブサイトをどんな外見にするか
まずはじめに、次の質問に答える必要があります。
- 何についてのウェブサイトですか？ 犬、ニューヨーク、それともパックマン？
- 主題についてどんな情報を表現しようとしていますか？ タイトルといくつかの段落、それからページに表示させたい画像を考えます。
- ウェブサイトをどんな外見にしますか？ 簡単で大まかな言葉で言うと？背景色は？適切なフォントはフォーマル？漫画？太字で派手？繊細？
大げさに言えばグランドデザインですね。
複雑なプロジェクトでは、色、フォント、ページのアイテム間の余白、適切な文体など、詳細なガイドラインが必要です。これは、デザインガイド、デザインシステム、ブランドブックなどと呼ばれます。一例として、 Firefox Photon Design Systemがあります。そうですね。担当が勝手に実装するとページ単位での見た目とかが異なることになります。
デザインガイド、デザインシステム、ブランドブックでググってみました。
デザインシステムとは？｜国内外の参考になる事例10選と共に解説
デザインシステムとは？内容や作り方、運用方法を解説します
2022年版 おすすめのデザインシステム5選
「デザインシステム」とは「一貫性を持ったデザインにするためにデザインのルールを定めたもの」です。
だそうです。
(a)デザインをスケッチする
アナログで紙に描いても良いでしょうが、ワイヤーフレームツールを使ってまずはざっと描いてみてブラッシュアップしていくのだろうと思います。
以前はAdobe XDのフリー版があったのですが、今は無くなりました。
【2023年版】ワイヤーフレームツールおすすめ11選を徹底比較！（無料あり）
これはというツールがないですね。
敢えて選ぶならFigmaかCacooくらいですかね。
(b) 資産を選ぶ
(c) テキスト
(d) テーマカラー
(e) 画像
Google画像検索というのがあるんですね。
私は普通にGoogleで検索して「画像」タブを選択して適当なフリー画像を探していました。
言うまでもなく多くの画像には著作権があるので勝手に使うことは出来ません。
著作権フリーまたは「xxxxxの画像を使っています。」と記載するだけでも良いものもあるのでいずれ調べてまとめておきたいですね。
(f) フォント
特に日本語については、ゴシック、明朝だけでなくとてもたくさんのフォント（書体）があります。
Googleフォントというのがあります。
いわゆるWebフォントというものです。
これらのGoogleフォントファミリーの名前はNotoですが、その名前には面白い由来があります。
"Noto" means "I write, I mark, I note" in Latin. The name is also short for "no tofu", as the project aims to eliminate 'tofu': blank rectangles shown when no font is available for your text.
Google翻訳で翻訳すると
「Noto」とはラテン語で「書く、印を付ける、メモする」を意味します。 このプロジェクトは、テキストに使用できるフォントがない場合に表示される空白の四角形である「豆腐」を排除することを目的としているため、この名前は「no tofu」の略でもあります。
- ラテン語の「書く、印を付ける、メモする」
- No Tofu(対応するフォントがない場合に表示される四角形のこと)
のダブルミーニングということです。
フォントが見つかったら、そのフォントを使用する方法は大きく分けて 2 つあります。
- Google のサーバーからフォントを読み込むために、コードに参照を追加する。
- 自分のシステムにフォントファイルをダウンロードし、フォントをホスティングし、ウェブサイトのコードでホスティングしたコピーを使用する。
Googleのサーバを参照するか、ダウンロードするかの二択ということです。
メモ: Google フォントでホスティングされているフォントを提供すると、フォントサービスがユーザーの IP アドレスを公開するため、EU のデータプライバシー規則である GDPR に抵触する可能性があります。これが問題になりそうな場合は、2 つ目の選択肢を選んでください。
以上のような注意書きがありました。フォントサービスがユーザのIPアドレスを公開するというのは、ちょっといただけないですね。
Googleフォントは「Download family」というボタンがあるので自由にダウンロードできるようです。
フォントのインストールは単純に「C:\Windows\Fonts」 にダウンロードしたフォントをコピーするだけで良いみたいです。
 |
| Noto Sans Japanese |
 |
| Noto Serif Japanese |
日本語OS（Windows11)標準の日本語フォント
またこれは仕事をしていたときの実際の経験です。
フィリピンで働いているので英語版のWindowsを使っています。明朝体やゴシックはインストールされていないので実装担当がWebフォントを使っていたのですが、日本語版のWindowsを使う前提なのでWebフォントを使わないで下さいと客先から指示がありました。
MSからダウンロードした明朝体、ゴシックフォントをインストールしてWebフォントを使わないようにしました。
その時に、では何が標準の日本語フォントとして使えるんだろうと思ってググりました。
- BIZ UD ゴシック・明朝体
- UDデジタル教科書体
- Yu Gothic UI
- 游ゴシック・游明朝
- Meiryo UI
- メイリオ
- MSゴシック・MS明朝
- MSPゴシック・MSP明朝
- MS UI Gothic
以外とありますね。
SansとSerifの違い
serif
sans-serif
"sans-"はフランス語で「無い」という意味だそうです。
なので"serif"があるかないかという区別ですね。
その"serif"は、字体の曲がり角にある飾り（うろこ）のことを指すそうです。
日本語だと"serif"は「山」と表現するようです。
なので
- serif（明朝）：セリフ（山）があり、線の太さが一定ではないもの
- sans-serif（ゴシック）：セリフ（山）がなく、線の太さが一定であるもの
とうのが大まかの区別になります。
セーフウェブフォント
また、Arial、Times New Roman、Courier New などのセーフウェブフォントを使用することもできます。と最後にさらっと書いてあります。
セーフウェブフォントって？
ぐぐってみましたが表記にブレがあるようです。
Web Safe font
Safe Web font
CSS Web セーフ フォント
Web セーフ フォントとは何ですか?確かに以下はどのOSでも使えそうなフォントですね。
Web セーフ フォントは、すべてのブラウザとデバイスに共通してインストールされるフォントです。
- Arial
- Times New Roman
- Courier New
あくまでデバイス（OS）にインストールされているのが前提なのでGoogleフォントのようなWebフォントはセーフウェブフォントにはならないようです。
Webフォントのメリット・デメリット
恥ずかしながら上記のように仕事で指摘されるまでWebフォントなんてあると知りませんでした。
WEBフォントって何？メリット・デメリットとオススメサービスをご紹介！【2020年】
メリット
- デバイスを気にせずにフォントデザインが選べる
- SEO対策を強化できる
- レスポンシブデザインとも相性が良い
デメリット
- 利用料が必要になることがある
- 表示速度が遅くなることがある
- 利用規約によっては商用利用できないことがある
Webフォントの前にはフォントはデバイス（OS）にインストールされているものでした。
なのでデバイスによっては想定しているフォントがインストールされていなくて異なる見た目になったり最悪は□（豆腐）になっていたということですね。
Webフォントにすると、そういったことは解消されて想定した通りの見た目をどのデバイスでも再現できるということでしょう。
その反面、費用や商用利用、速度の問題があるということですね。
費用や商用利用についてはGoogle フォントを使えば良いでしょう。
速度については、不要なフォントを読み込まない、サブセット化するということで速度向上ができるようです。
【Webフォント高速化】使わない文字を除く！サブセット化の方法
アルファベットに比べて日本語は１文字のデータ量も大きいし文字数も多い。
何も考えずに使うと表示速度が遅くなる（読み込みに時間がかかる）ということが起きます。
そのため最近まで日本語のWebフォントはあまり普及してなかったようですが、今後は普及していくと思います。
0 件のコメント:
コメントを投稿