個人サイトのデザインやレイアウト
基礎に忠実かつシンプルデザインなら、失敗はしないです。
見出しは見出し。本文は本文。リンクはブルーで下線を引く。表を使って画像を無理やり押し込むのではなくCSSで指定する…などなど。
これらのセオリーと言いますか、基礎的なことにはちゃんと理由があります。
Webブラウザが見出しや表であることを認識し、それの通りに表示しようとするからなんですよね。
とは言ったものの、ウェブサイトビルダーがやってくれるから心配しなくていいです。
そうそう当たり前の話ではあるけど、もうウェブデザインと言えばレスポンシブデザインが常識です。
『F』や『Z』の型が基本です
.JPG)
Webデザインで『F』や『Z』の型が基本というのは、一般的に受け入れられている考え方です。
よって、メニューの位置は左上が基本です。
多くのサイトがそうなっているのですから、それに合わせるといいですよ？
あまりにオリジナリティーが過ぎると、離脱率の上昇を招いてしまいます。
Fパターン
- ユーザーはページの上部や左側に注目することが多いです。
- 見出しや重要な情報を左上に配置し、段落の冒頭部分を左揃えで配置するのが効果的です。
Zパターン
- ユーザーはページの左上から右上、次に左下へと視線を動かし、最後に右下に注目する傾向があります。
- このパターンはシンプルなデザインやランディングページにも適しています。視線の流れに沿って、重要な情報を配置することで効果的なデザインが可能です。
これらの型を活用することで、ユーザーの視線を効果的に誘導し、重要な情報を見逃さないようにすることができます。
少し表現を変えれば…
自分の祖父や祖母が、迷わず快適に閲覧・操作できるWebサイトを作る。
これがベストプラクティスです。
画像を入れるポイント
.JPG)
画像のサイズやフォーマット、Alt属性の設定。ここらへんはいいですよね。
レスポンシブデザインにも対応させるのもそうですし。
著作権は気を付けてください。
例えば生成AIによって吐き出された画像は、著作権としてはグレーです。
Webサイトで使うカラーは最低限に
ここはけっこう気を使ってますね。
できる限り、カラーを統一するようにしています。
例えば下記の文章、どう思いますか？
私はパソコンが得意です。 でも才能やセンスがあったわけではなく、 家のパソコンをおもちゃにしていたのがきっかけだったのです。 呆れた父親がパソコンの教科書を買ってきて、 お古のパソコンを私にくれました。 勉強すればするほど思い通りに遊べて楽しかったです。
自分が強調したいのは分かるけど、あっちこっちに目線が飛びますよね。
そしてマーカーや下線を乱用しており、本人が何を強調したいのかが分かりにくい。
赤字強調するかどうか迷ったら、いったん強調しないで公開するくらいがちょうど良いと思います。
でもこういう考え方も度が過ぎると、すごく硬い雰囲気になってしまうんですよね…
このサイトは少し変化に乏しいと自分で思います。
どこかで草花の写真とか、添えていきましょう🌸🍂
フォントデザイン
ここは少し詳しく書くように心がけていきます。
SNSで創英角ポップ体を始めとするフォントの話題が沸騰していたんですよね。
まず、このサイトでは次のようになっています。
- ひらがな・カタカナ・漢字は「Nato Sans JP」
- 半角の英数字や記号を「Lato」
どちらも Google Fonts であり、Webフォントの一種です。
Noto Sans JP
Noto Sans JPが注目され、多くのプロジェクトで採用されている理由はいくつかあります。
まず、GoogleとAdobeが共同で開発したフォントであり、多言語対応が可能な点が大きな魅力ですよね。
特に日本語に特化したデザインがされており、読みやすさと美しさを両立させています。
無料で利用できることも人気の理由の一つ。
WebデザインやUI/UXデザインで広く使われており、特にウェブサイトやアプリの日本語表示に適しています。
他にも、シンプルでモダンなデザインが特徴で、多くのデザイナーに支持されています。
Lato
こちらも幅広く使用されており、多くの言語に対応していて汎用性が高いと言えます。
ポーランドのデザイナー Łukasz Dziedzic によって作られたフォント。2010年に初めてリリースされ、その後Google Fontsライブラリーに追加されました。
最も一般的な英数字用Webフォントというと、ArialやHelveticaも良いと思います。
これらはシンプルで読みやすく、長い間多くのサイトで使われてきたフォントです。
Noto Sans JPとLatoの文字セット
Noto Sans JPとLatoには、それぞれ異なる文字のセットが含まれています。
Noto Sans JP
Noto Sans JPは、日本語とラテン文字の両方をサポートするため、日本語テキストを含むウェブサイトに適しています。
- ひらがな、カタカナ
- 漢字
- ラテン文字（A-Z、a-z）
- 数字（0-9）
- 記号
- その他の日本語に関連する特殊文字
Lato
Latoは主にラテンアルファベットをサポートしているので、欧文のテキストに適しています。
- ラテン文字（A-Z、a-z）
- 数字（0-9）
- 記号（例：!、@、#、$、%）
- 特殊文字（例：é、ä、ß）
- 基本的な通貨記号（例：€、$、¥）
ブラウザのフォールバック機能
.JPG)
コードの紹介は別のページに譲りますが、ブラウザはフォント指定に従って、次のように動作します。
- Latoが最初に指定されているフォントなので、ブラウザはまずLatoで文字を表示しようとする。
- グリフが見つからない場合：Latoには日本語のグリフが含まれていないため、ブラウザはこのフォントでは表示できないと判断する。
- 次のフォントにフォールバック：ブラウザは次に指定されているNoto Sans JPをチェックし、ここに日本語のグリフがあると判断する。
- 適用: 最終的にNoto Sans JPで日本語を表示する。
つまり、フォントが対応するグリフを持っていなければ、次のフォントに自動的にフォールバックして表示するという仕組みです。
Latoは元々、ラテン文字（英数字など）を表示するためのフォントとしてデザインされているので、日本語のグリフは含まれていません。
Latoフォントにはひらがな、カタカナ、漢字など日本語を構成する文字が含まれていないという意味です。
じゃあなぜLatoでも日本語が表示できるかというと、ブラウザはフォントスタック（複数のフォント指定）を使って、指定した順にフォントを確認していくからです。
Latoには日本語が含まれていないので、次に指定されたNoto Sans JPを使って日本語を表示する。
これがフォールバック機能という仕組みです。
ブラウザのデフォルト表示について
htmlやcssでなーんにもフォントの指定をしなかった場合、ブラウザはデフォルトで何のフォントを選ぶかと言うと、各OSやブラウザによって異なるフォントを選びます。
一般的には次のようなフォントが使用されますね。
- Windows: Times New Roman（セリフ体）、Arial（サンセリフ体）
- macOS: Times（セリフ体）、Helvetica（サンセリフ体）
- Linux: ディストリビューションや設定によるが、DejaVu SerifやDejaVu Sansが多い
- Android: Roboto
- iPhone/iPad (iOS): San Francisco（iOS 9以降）、Helvetica Neue（iOS 9以前）
これらは特定のフォントが指定されていない場合に使われる標準フォントです。
標準フォントは各OSが選ぶものなので、閲覧環境によって表示が変わることがあります。
互換性とWebフォント
.JPG)
Webフォントを使うことで閲覧者のパソコンやスマホの種類を問わず、私の意図通りに表示されるようにしています。
互換性というのは、簡単に言うとWindowsでもMacでも、はたまたAndroidでもiPhoneでも表示や活用ができるという意味です。
例えばMicrosoft Wordの拡張子は.docxですが、これはたいていのOSで表示が可能です。
しかしその互換性は完璧ではなく、細かいレイアウトなどが崩れてしまうこともあります。
Webサイトを閲覧する時、フォントの表示はどのような仕組みになっているのかを考えるとWebフォントのメリットが分かりやすいでしょう。
普通にやるなら、Web制作者側が見出しや本文、注釈などのフォントを決めます。
それをWebブラウザがその端末に入っているフォントを使って表示する流れになります。
この方法の欠点は閲覧者のデバイスによってはWeb制作者が思うようなフォント表示にならないことです。
閲覧者のデバイスにWeb制作者が設定したフォントがインストールされていない場合、別のフォントに変えられてしまうんですよね。
しかしWebフォントはそうではありません。
閲覧者がWebサイトを表示しようとしたとき、インターネット上にあるフォントのデータをダウンロードしてきて表示してくれるのです。
多少データの容量が増えてしまいますが、現在のネットワーク環境ならよっぽどおかしなことをしない限り問題は出ません。
Webフォントは閲覧者のデバイスによって見え方が違うなんてことは起こらないため、Web制作者の決めたデザインがそのまま反映されます。
加えて完全無料であることも長所として挙げられるでしょう。
私がGoogleサイトを選び、かつBloggerをお勧めしている理由がこんなところにもありますよね。
Google FontsというWebフォントがデフォルトになっているので、細かいレベルでのデザイントラブルが発生しにくいのですよ。
ITに詳しくなくても、Googleが世話をしてくれます。
もちろん後からシステムにフォントをインストールすることもできます。
例えば「Nato Sans JP」は、私が後から自分のGoogleドキュメントにインストールしたものです。
サイトマップ
アナザーエデンの強敵戦やストーリーコンテンツのリスト、お勧めバッジなどを掲載したコーナーです。
期間限定のない普通のRPGですので、初心者でも安心して続けていけるゲームとなっています。
もっとも重要なグラスタについては、場所別に網羅した表があります。
個人でウェブサイトを作るにはどうすればいいか。
HTML・CSS・JavaScriptの書き方はもちろん、無料かつ広告なしでホームページを作る方法を掲載したコーナーです。
Webデザインやレイアウトについても書いてあります。
ゲームとパソコンだけじゃなく、アウトドアも趣味なんです。
このコーナーでは魚釣りの記録とか、魚料理のレシピ、はたまたサイクリングなどなど。
アウトドアに関連するコンテンツが詰め込まれています。