ダサいサイトにならないコツ

もうこれ、多くの人が同じようなこと言ってるんですよね。

シンプルな機能・シンプルなレイアウト・シンプルなカラー。
こういうシンプルなWebサイトを、レスポンシブデザインで作る。

初めての個人サイト制作であり、ダサいと思われないことを最優先とするなら、シンプルデザインこそ最適解だと思います。

個人サイトはダサくて良い

実際にそうだと思うんですよね…とても難しいですよ。
今はダサいとされるデザインであっても、昔はカッコ良かったわけでしょ？
人からどう思われようが、自分が楽しければそれで良いのが個人サイトだと思うし。

私だってこうやって好き勝手に雑草やら草花やらの写真を載せて遊んでます。
これは、ある人から見ればダサいのかもしれません。
でも私にとっては１枚１枚の写真が大切な思い出なのですよ。
ただ、掲載の仕方というか、フェードアウトを利かせたりとか。
そういう小さな工夫くらいはしてます。

じゃあ…私が分かる範囲で、ダサくならないコツを真面目に書いていきましょうか。
確かにやっちゃいけないNGデザインというのはあるんです。
例えば現代のWebサイトであるならレスポンシブデザインは必須ですからね。

デザインの古さ

サイトの見た目や使い勝手が時代遅れであることを指します。
例えば不適切な色の組み合わせや過度に派手な色使いは、見た目を悪くする原因になります。
んー…時代遅れと言いますか、ひとまず無難なカラーパレットを選んでいけば良いと思うんですよね。
派手にするのは後でも遅くない。
具体的に見ていきましょう。

レイアウトが固定されている: 昔のサイトは画面の幅が固定されており、スマートフォンやタブレットで見ると見づらいことがあります。
色使いが古い: 90年代や2000年代初期のウェブサイトは、派手な色やコントラストの強い色を多用していました。でもこれとて一概にダサいとは言い切れないと思いますよ？
古い時代のMicrosoftのサイトなんか、カッコいいと思う。
フォントが読みづらい: 古いフォントや小さすぎる文字は、現代の標準から見ると読みづらいです。
ナビゲーションが分かりにくい: メニューが複雑であったり、リンクが分かりにくい場所に配置されていることがあります。

具体的にどう直していくか

レスポンシブデザインを採用する
画面のサイズに応じてレイアウトが変わるデザインです。
とても重要なので後述します。

シンプルな色使いにする
カラーパレットジェネレーター（例：Coolors）を使うのが一番無難かと。
いっぱい色を使わない方が良いことだけは確かです。

読みやすいフォントを選ぶ
大きくて読みやすいフォントを使うと、訪問者に優しいサイトになります。
Google Fontsなどの無料フォントライブラリから読みやすいものを選びましょう。

ナビゲーションをシンプルにする
訪問者が迷わないように、メニューを分かりやすく配置します。
重要なページへのリンクをトップメニューに配置し、サブメニューは必要最低限に抑えたほうが良いです。

このサイトの場合
古臭いかどうかは、あんまり意識していないですね。
私は90年代や2000年代初期のウェブサイトデザインについて、世代的にも詳しく知っているわけではないので。
ただレスポンシブを必須として、シンプルデザインは一貫して心がけています。

レスポンシブデザインの欠如

モバイルデバイスでの表示が最適化されていないと、多くのユーザーにとって使いにくいサイトになります。
サイトがスマートフォンやタブレットなどの異なるデバイスで見たときに、見た目や使い勝手が悪くなる。
この状態だとSEOとしても良くないんですよね。
ちなみに「スマホブラウザでパソコン表示モードにする」ことをレスポンシブデザインとは言わないので、ご注意ください。

画面サイズに合わない: スマートフォンで見ると文字が小さすぎたり、画像がはみ出したりします。
操作しづらい: 小さな画面でボタンやリンクが押しにくくなることがあります。
読みづらい: 文字が小さすぎたり、行間が狭すぎて読みづらくなります。

具体的にどう直していくか

ウェブサイト作成ツールを使う
Google SitesやBloggerなどのウェブサイト作成ツールを使うと、簡単にレスポンシブデザインを取り入れることができます。
これらのツールはドラッグ＆ドロップで操作でき、特別な知識がなくても使いやすいです。

レスポンシブデザインのテンプレートを使う
既にレスポンシブ対応されているテンプレートを使うことで、手軽にデザインを改善できます。
テンプレートを選んで、自分のコンテンツを追加するだけです。
htmlテンプレートなどを使っても良いですね。

画像や文字のサイズを調整する
あんまりお勧めできないです。
要するに手でコードを書くってことですよ。
画面サイズに応じて画像や文字のサイズが自動的に変わるように設定します。
ウェブサイト作成ツールやテンプレートには、この機能が組み込まれていることが多いですよね。
htmlやcssを使って実装もできますが、巷ではプロフェッショナルレベルの知識がないと難しいなどと言われていることがあります。
個人的には、そんな言うほどプロフェッショナルなコードではないと思いますが、慣れないと敷居が高いと思われます。

プレビュー機能を使う
サイトを公開する前に、スマートフォンやタブレットでどのように見えるかを確認します。
ウェブサイト作成ツールには、プレビュー機能が付いていることが多いので、それを活用しましょう。
個人サイトをイチから全て手作りする場合、ここの段階でローカルサーバーや仮想環境の構築が必要になるケースがあります。

シンプルなデザインを心がける
シンプルなデザインは、どのデバイスでも見やすく、使いやすいです。
余計な装飾を避け、必要な情報だけを分かりやすく配置します。

このサイトの場合
ウェブサイト作成ツールを使わず、html・css・JavaScript・Python といったコードを全て私が書いています。
しかし個人サイトというカテゴリーとして考えれば、やっぱりウェブサイト作成ツールを使うのがお勧めですよ？
子供の頃からWeb制作やって遊んでいたので、知識がどうのこうの以前に、慣れているだけのことです。
学生時代に作ったWebサイトやブログの原稿、プログラムなどなど…膨大なデータが手元に残っています。

Webサイトの色使い

不適切な色の組み合わせや過度に派手な色使いは、見た目が悪くなったり、情報が見づらくなったりする原因になります。
調和の取れたカラーパレットを選べるといいんですけどね。
敢えて冒険してカッコ良く見せる手法もありますが、初心者さんは避けた方が良いかも。

色のコントラストが強すぎる: 背景色と文字色のコントラストが強すぎると、目が疲れやすくなります。
色の組み合わせが不適切: 色の組み合わせが悪いと、全体的にまとまりがなく、見た目がごちゃごちゃします。
色が多すぎる: 多くの色を使いすぎると、どこに注目すればいいのか分からなくなります。

具体的にどう直していくか

シンプルなカラーパレットを使う
3～4色程度のシンプルなカラーパレットを使うと、サイト全体がまとまりやすくなります。
カラーパレットジェネレーター（例：Coolors）を見渡してみるのお勧めです。

コントラストを調整する
背景色と文字色のコントラストを適切に調整することで、読みやすさが向上します。白い背景に黒い文字など、シンプルで読みやすい組み合わせを選んだほうがいいです。

アクセントカラーを使う
重要な部分にだけアクセントカラーを使うことで、視線を誘導しやすくなります。リンクやボタンなど、クリックしてほしい部分だけに目立つ色を使う方向で。

色の心理効果を考慮する
色にはそれぞれ心理的な効果があります。例えば、青は信頼感を与え、赤は注意を引きます。サイトの目的に合わせて、適切な色があると思うんですよね。

最新のデザイン例を参考にする
他のサイトやデザインギャラリーを参考にして、最新の色使いのトレンドを学びます。
でも本格的にやると立派な職業になっちゃいます。ほどほどにね？
DribbbleやBehanceなどのデザインコミュニティサイトをチェックしてみましょう。

このサイトの場合
次のようにしていますが、私が作るサイトってだいたいどれも同じです。

全体的に青の系統を用いる: ハイパーリンクが青だからです。
Webサイトでは必ずハイパーリンクを使うため、そのデフォルトカラーと合うようにしています。
個人的に好きな色でもあります。
たまに緑の系統も用いる: 青ばかりだと冷たい印象が出てくることもあります。
たまには違う色も添えていますね。
緑を選んでいるのは、青とともに自然環境の中で最もよく見られるカラーだからです。
森や草原・湖と海・そして白い雲と青い空があります。
これらはどんな人でも見慣れているカラーだと思うから。
差し色は薄い赤: 目立たせるべき場所では赤を使いますが、それでも薄い赤や黒に近い赤を使います。
真っ赤に塗りつぶすようなことはしないですね。

ウェブサイトのハイパーリンクはデフォルトで青色

これにはいくつかの理由があります。

視認性: 青色は背景色とコントラストが高く、目に留まりやすいため、ユーザーがリンクを見つけやすくなります。
歴史的背景: インターネットの初期から、リンクは青色で表示されることが標準となっています。すでに「リンク＝青色」という認識は広く浸透しています。
ユーザーの期待: 多くのユーザーが青色のテキストをリンクとして認識するため、青色を使うことで直感的にリンクであることが伝わります。

差し色とは

例えば、全身を黒やグレーなどのモノトーンでまとめたコーディネートに、赤いバッグや青い靴を加えると、その赤や青が「差し色」となりますよね。
このように差し色を使うことで、全体の印象にメリハリをつけたり、華やかさをプラスしたりする効果があります。
ウェブサイトのデザインでも同様に、落ち着いた背景に対してボタンやリンクに鮮やかな色を使うことで、ユーザーの目を引きやすくし、重要な部分を強調することができます。

フォント選び

シンプルで読みやすいのが一番だと思います。そうしないと、全体の印象が一気に悪くなります。

読みづらいフォント: 装飾が多すぎるフォントや、小さすぎる文字は読みづらくなります。
フォントの統一感がない: 複数のフォントを無秩序に使うと、サイトがごちゃごちゃして見えます。
文字サイズが不適切: 文字が小さすぎたり、大きすぎたりすると、読みづらくなります。

具体的にどう直していくか

モダンで読みやすいフォントを選ぶ
Google Fontsなどの無料フォントライブラリから、モダンで読みやすいフォントを選びます。
「Roboto」や「Open Sans」なども人気が高いです。

フォントの統一感を保つ
サイト全体で一貫したフォントを使うことで、統一感が生まれます。
見出しと本文で異なるフォントを使う場合でも、2〜3種類に抑えると良いですね。

適切な文字サイズを設定する
読みやすい文字サイズを設定することで、訪問者が情報をスムーズに読めるようになります。
本文の文字サイズは16px前後が一般的かと思いますが、見出しはそれより大きく設定する感じで。

行間を適切に設定する
文字が詰まりすぎないように設定します。
読みにくい強調装飾が付いているようなフォントを、びっしり並べないようにしましょう。
もうそれだけで離脱率が上がりますよ。

このサイトの場合
日本語は「Noto Sans JP」、英数字や記号は「Lato」を使っています。
いずれもWebフォントですね。
詳しくは個人サイトのデザインやレイアウトに書いてありますが、無難な選択かと思いますよ？

ただ、このサイトの場合はおそらく文字サイズは小さめ、行間は狭い部類に入るかと。
あまりガバガバっと大きい字や行間が好きではないのです…
アフィブログとかでよく見かけるスタイルで、良い印象がありません。

ナビゲーションの使いにくさ

メニューが分かりにくい、リンクが機能しないなどの問題があると、ユーザーはサイトを使いにくく感じます。
直感的で使いやすいナビゲーションを心がけたいところですが、これがまた極めて難しいのです。
ある程度技術的なことが要求されてしまう事情もあります。

メニューが複雑すぎる: 多くの項目が詰め込まれていると、どこをクリックすればいいのか分かりにくくなります。
リンクが見つけにくい: 重要なリンクが目立たない場所にあると、訪問者が迷ってしまいます。
一貫性がない: ページごとにナビゲーションの位置やデザインが異なると、混乱を招きます。
階層が深すぎる: 多くのサブメニューを経由しないと目的のページにたどり着けないと、使いにくくなります。

具体的にどう直していくか

シンプルなメニューを作る
メニュー項目を絞り込み、必要最低限のリンクだけを表示します。
トップメニューには主要なページへのリンクだけを配置し、サブメニューは必要な場合にのみ使います。

重要なリンクを目立たせる
訪問者がすぐに見つけられるように、重要なリンクを目立つ場所に配置します。
例えば、トップページやサイドバーに配置します。

一貫性を保つ
全てのページでナビゲーションの位置やデザインを統一します。
テンプレートを使って、全ページで同じナビゲーションバーを使用します。

階層を浅くする
訪問者が少ないクリックで目的のページにたどり着けるようにします。
メニューの階層を2〜3段階以内に抑え、重要なページはトップメニューから直接アクセスできるようにします。

このサイトの場合
私のサイトのケースは特に難しいです。
ポータルサイトとこちらのサイトで役割が違う上に、ゲーム・IT・アウトドアと話題が広がっています。
個人サイトはこういう感じになりやすいけどね。
なので、ナビゲーションの主要な位置にそれぞれの話題の「サイトマップ」を付けるようにしています。
サイト全体のサイトマップというより、話題に応じてサイトマップを使い分け、そこへナビゲーションによって到達できるようにしてますね。

サイトマップ

アナザーエデン関連ページ・サイトマップ

アナザーエデンの強敵戦やストーリーコンテンツのリスト、お勧めバッジなどを掲載したコーナーです。
期間限定のない普通のRPGですので、初心者でも安心して続けていけるゲームとなっています。
もっとも重要なグラスタについては、場所別に網羅した表があります。

個人サイトのホスティングとコンテンツ作成

個人でウェブサイトを作るにはどうすればいいか。
HTML・CSS・JavaScriptの書き方はもちろん、無料かつ広告なしでホームページを作る方法を掲載したコーナーです。
Webデザインやレイアウトについても書いてあります。

魚釣りなどアウトドアのエリア

ゲームとパソコンだけじゃなく、アウトドアも趣味なんです。
このコーナーでは魚釣りの記録とか、魚料理のレシピ、はたまたサイクリングなどなど。
アウトドアに関連するコンテンツが詰め込まれています。