サイトのレイアウトを考える上での参考サイト

今まで自分がサイトのレイアウトやデザインを考える上で参考にさせていただいたサイトやらなにやらを未来の自分に向けてまとめておこうと思います。

きっと「あれ、どこで見たっけ?」ってなるから。

記事の表示幅

ブログ初心者応援サイト:Naifix

これが読みやすいブログデザイン!有名サイトの記事幅と余白設定を大公開

読みやすいブログは記事の幅や余白を計算してデザインしています。有名サイトの記事幅・コンテンツ幅・余白の設定を調べてひとつの基準を割り出してみました。テーマ作成やカスタマイズのご参考にどうぞ。

眼球の可動域に対して読みやすい幅があるそう。
使ってるiMacとか27インチなのですが、横幅が2,569pxもあるので、フルサイズにすると目の運動にはなりそうです(笑)
やはり、適切な横幅に設定されていた方が読みやすいですね。

複数サイトを取り上げて平均値を出しているだけですが、コンテンツ幅の参考にしています。

また、ブログをPCから見た時、2カラムだったり3カラムだったりする場合もありますが、うちは1カラムセンター表示にしています。

2カラムは記事が画面中央にこないので、ディスプレイに対して真正面に座っていたら、集中して読む文章が横にずれることになってそれぞれの目との距離が変わってしまうんですよね。
両目で対象物との距離に差が出ると、左目と右目で視力に差が出る原因になる(らしい)ので、2カラムはやめています。
以前、眼科の先生がそんなこと言ってた。

あと、真正面からずらすのめんどくさいし見にくい。(個人の感想です)

3カラムは画面ごちゃごちゃするし、そこまで表示するものないしなーと思って、バッサリ1カラムにしています。

まあ、その方がレスポンシブだと組みやすいっちゃ組みやすいのですけど。

フォントの指定

最初に参考にしたサイトはもうすっかり忘れてしまい、かつ、どー考えても検索結果のサイト順位入れ替わってるわーという気がしますので、最近「お、このまとめ良い!」と思った記事を置いて未来の自分に託します

読みやすいフォントの CSS 設定例

見やすいフォントファミリーの説明や、見やすいフォントサイズ、文字色、行間などにも言及しています。

最後にまとめた設定例があるので、急いでいる場合はそこだけ見ても良いかも。

うちのサイトでは、Adobeの源ノ明朝を使用しています。また、Webフォントなので、ダウンロードされるまでは、端末内の明朝体で表示されるように指定しています。

なんで明朝体かと言いますと、サイトデザインイメージが和風なので、以外に大きな理由はありません。

源ノ明朝は、Webで見やすい明朝体を目指して作られたもので、逆に紙媒体にこれ使うと読みにくいらしい。書体ってムズカシイ……。

レイアウト

これは目的に合わせてあちこちのサイト見て良いなーと思ったものを試しに取り入れて取捨選択していっている感じです。

あとはこういうギャラリーサイトで参考になりそうなサイト探したりしています。

縦長のwebデザインギャラリー・サイトリンク集|MUUUUU.ORG

縦長のwebデザインギャラリー・サイトリンク集|MUUUUU.ORG

縦長のwebデザインをがむしゃらに集めています。

「Web レイアウト ギャラリー」とかで検索すると、こういうWebギャラリーサイトをまとめてくれているページとかいっぱい出てきますよ。

おかげで、普通の作品置き場の意味でのギャラリーのレイアウトの参考になりそうなサイト見つからないんですけど( ・∇・)

これは個人の考えですが、見やすい&使いやすいと思ったサイトのレイアウトはどんどん真似るなり参考にするなりすればいいと思うんですよね。

だってそれ、UI/UXが良いってことですから、真似することで学べると思うんですよ。
コードそのものには著作権はないので気にしなくて良いですし。

ただ、配布されているテーマが被っちゃった場合はともかくとして、デザイン含めて丸パクリは論外ですよ。デザインに独創性が認められたら著作権侵害になりますからね。

コードも本来はクラス名とか変えて参考元がわからないようにするのがお作法ですが、使用する意味合いが同じになるなら同じになっちゃっても仕方ないだろ〜と思っています。

ちなみに、ギャラリーサイトをまとめてくれているサイトもあるのですが↓

東京上野のWeb制作会社LIG

Webデザインの参考になるギャラリーサイト30選【保存版】 | 東京上野のWeb制作会社LIG

LIGのデザイナー・ミライが、Webデザインの参考になるギャラリーサイト、30サイト押し売りします。みなさんが、刺激的なクリエイティブライフを送れますように。

トーシロ同然の僕レベルでは30選とかされても探すのに疲れまする……。

パーツデザイン

サルワカ | サルでも分かる図解説明マガジン

CSSで作る!押したくなるボタンデザイン100(Web用)

HTMLとCSSのコピペで使えるボタンデザイン例を100個まとめました。立体的なものや、フラットWebデザインで使えるもの、SNSボタンまで。

サルワカ | サルでも分かる図解説明マガジン

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。

サルワカ | サルでも分かる図解説明マガジン

【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30

HTMLとCSSのコピペですぐに表示できる『囲み枠』『ボックスデザイン』の例を30個紹介します。Webサイトやブログでご活用ください。

サルワカさんは、汎用デザインのものがまとまっていて、探しに行くのに便利です。
凝ったものは他を探したほうがいいですが、シンプルでよければここを参考にすればたぶんOK。

全然関係ないけど、Gitとか他の技術関連でもたまにお世話になっています。

【5パターン】画像を使わず CSS3 のみで作れる吹き出しを作ってみた - Pure CSS3 Ballons

数年前の記事で古いですが、最初に吹き出し作るのにお世話になったのがここなので。

先述のサルワカさんでも、吹き出しの作り方のページはあるので、今だとそっちを参考にした方がいいかも。

サルワカ | サルでも分かる図解説明マガジン

CSSで作る!吹き出しデザインのサンプル19選

コピペで使える「吹き出し」のCSSサンプルをまとめました。使うのはHTMLとCSSだけ。シンプルなデザインから、円形、会話形式、LINE風チャット形式まで。

番外編

Figma

某可動式フィギュアのせいでツール名だけでは出てこないUIデザインツールです

個人なら無料で使える、ベクター系ソフトでもあります。
おかげでサイト表示用の SVG ファイル作るのに助かっています。(Inkscape重くって)

イラレというよりは、Adobe XD や Scketch の競合・代替になるツールです。

サイトのレイアウト組む前に一回これで作成して、見やすいか確認しています。
細かいところは使わずにちゃちゃっとコードの方でやっちゃうんですが。

IcoMoon

アイコンフォントを作成してくれるサイトです。

欲しいアイコンだけを抜き出してフォントデータを作ってくれるので、助かっています。
画像でも保存できます。

最近は他にも提供サイト増えてるみたいなんですが、僕はこちらをずっと利用させていただいています。

TinyPNG

Web表示する画像を圧縮するのに利用している某有名なパンダさんです。

僕がたまに「パンダを通してからあげて欲しい」って言ってるパンダはここのことです。

圧縮前と圧縮後でどこが変わったのかよくわからないくらい綺麗に、Webに不要な情報を削ぎ落として圧縮してくれます。

Webサイトはもちろん、ツイッターやインスタにあげる画像もパンダを通しています。
あまり他人のパケット奪うのも考えものですからね;

通し忘れてる画像あったらごめんなさい。


たぶん、このくらいでしょうか。

他に思い出したら追加していきたいと思います。