経験不足は関係ない！参考になるウェブサイトのデザインギャラリーサイト
個人ブログをはじめるとき、ブログのデザインに困った。どのようなデザインにするか具体的なイメージが湧かず、二日間ほど制作が進まなかった。ワードプレスなどのテンプレートを利用すればすぐだが、良くも悪くもよくあるデザインでなんだか気が進まない。せっかく個人ブログを始めるなら、自分独自のデザインにしたかった。
で、ウェブサイトのデザインを集めたギャラリーサイトというものがあると知った。そこに展示されているサイトから、なんとなくｲｲﾈ!と感じたレイアウトやブログパーツを集めた。集めるのは楽しかったが、選ぶのは面倒くさかった。集めることに体力を使ってしまったので、片っ端から突っ込んだ。
そしたら見ていて少しだけ楽しい気持ちになれる自己満ブログになった。自分で工夫したところを見るたびに満足感が湧く。記事一覧ページを見ると、もっと書いて充実させたくなる。自分独自のデザインではないが、いつまでも完成しないよりはマシだった。
この記事では、個人ブログのデザインが湧かず、イメージがつかめずにいる方に向けて、参考になったサイトを紹介する。
厳選！ウェブデザインギャラリーサイト6選
個人ブログのデザインは、日本と海外のギャラリーサイト両者のデザインを参考にすることにした。両者のいいとこどりをしたかったからだ。
日本のウェブサイトは、情報量が多いが整理され、ユーザーにとって便利で機能的な要素が多い印象。
親しみや信頼感のある要素を見つけるのに効果的だった。
海外のウェブサイトは、大胆なレイアウトや文字、大きな余白を活かしたｶｯｺｲｲデザインが目立つ印象。
個人ブログ的なユニークさを見つけるのに効果的だった。
紹介するギャラリーサイトは、単に美しいサイトを集めているだけでなく、カテゴリ・タグ・色などで検索・絞り込みができるため、目的のデザインを探しやすかった。また、レイアウト・配色・フォントの使い方・特定のパーツのデザインなど、この部分がいいなと感じる要素を見つけやすく、自身のブログデザインにアイデアを取り入れやすかった。
海外のウェブサイトデザイン
最も参考にさせてもらったギャラリーサイト。Astroフレームワークを使ったブログテーマを見られる。
以下のカテゴリーで絞り込みができる。
- Blog
- Docs
- E-commerce
- Landing Page
- Minimal
- Official
- Other
- Portfolio
ｼﾝﾌﾟﾙ･ﾓﾀﾞﾝ･ﾀﾞｰｸﾃｰﾏが充実している。多くの場合、サムネイルでホームページ・ライトテーマ・ダークテーマが見られる。ページの反応が早い。また、タイトルが“Markdown Style Guide”・“Markdown Example”・“Elements”となっているページは、ブログでよく使われる見出し・強調・リンク・リストなどのデザインを一覧できて便利。
Tailwind CSS Components - Tailwind Plus
tailwindcssというCSSフレームワークのドキュメントサイト。きれいに整ったデザインパーツを見られる。
パーツの大まかなイメージをサムネイルで一覧できる。各パーツの横幅を変更でき、デザインがどんな風に変わるか参考になる。
- Marketing
- Page Sections
- Elements
- Feedback
- Page Examples
- Application UI
- Application Shells
- Headings
- Data Display
- ～省略～
- Ecomerce
- Components
- Page Examples
- Pricing
ｷﾚｲ･ｷﾉｳﾃｷ･ﾜｶﾘﾔｽｲ要素が充実している。とくにページレイアウトの例が多く、イメージが浮かびやすい。
最も見ていて楽しいデザインパーツサイト。BulmaというCSSフレームワークのドキュメントサイトだが、カラフルで活動的なデザインを見られる。
ページ左のナビゲーションにCSS Libraryという項目があり、以下のブログパーツが項目別になっている。
- Elements
- Block
- Box
- Button
- ～中略～
- Table
- Tag
- Title
- Components
- Breadcrumb
- Card
- Menu
- ～省略～
ｷﾎﾝﾃｷ･ｼﾀｼﾐﾔｽｲ･ﾀﾞｰｸﾃｰﾏな要素が充実している。配色はカラフルだが、要素自体は基本的な形やアニメーションになっているため取り入れやすかった。また、角が少し丸くなっていて、優しさ・親しみやすさを感じた。
日本のウェブサイトデザイン
日本のウェブサイトデザインを探す際に、頻繁にチェックしていたギャラリーサイト。クオリティの高い日本のサイトが多く掲載されている。
以下のカテゴリーで絞り込みができる。
- サイトの種類
- コーポレートサイト
- ブランドサイト・サービスサイト
- ECサイト・オンラインショップ
- キャンペーン・特設・プロモーションサイト
- ～省略～
- サイトの特徴
- スタイリッシュ
- オーソドックス
- ユニーク
- 遊び心がある・作りこまれている
- ～省略～
- 業種
- Web・IT・AI・デジタル・テクノロジー・通信
- ～省略～
- テイスト・あしらい
- シンプル
- 高級感
- 上品
- 誠実・信頼感
- ～省略～
- 色・配色
- ブラック・黒色
- ホワイト・白色
- ～省略～
- ステキポイント
- ステキな下層ページあり
- ステキなレイアウトあり
- ステキなバナー・ボタン・メインビジュアルあり
- ステキな文字・タイポグラフィ
- ～省略～
- 動き・ギミック
- 動き・エフェクト・アニメーションあり
- パララックス・スクロールエフェクト
- canvas・WebGL
- ～省略～
- レイアウト・その他
- レスポンシブ
- 1カラム
- 2カラム
- ～省略～
企業サイトが多く、情報設計がしっかりしていて洗練されたデザインが豊富。ブログだけでなく様々なジャンルの国内サイトのデザインに触れることで、ブログ制作に対する先入観が少なくなった。
日本のウェブサイトのパーツデザインを集めたギャラリーサイト。サイト全体の雰囲気よりも、個別の要素デザインを参考にしたい時に活用した。
ページ左のナビゲーションメニューから、以下の要素ごとに一覧できる。
- ヘッダー
- メインビジュアル
- 悩み・課題解決
- ～中略～
- フッター
- パンくず
- ～中略～
- ブログ一覧
- ブログ記事
- お問い合わせ
- ～省略～
サイトのページ全体が大きく表示され、比較やパーツ探しがしやすかった。日本のサイトに特化しているため、日本語の文字組や情報量に適したデザインが多かった。
【総数816件】UI LIBRARY | Webデザインの参考に！UIパーツごとにまとめたギャラリーサイト
ウェブサイトのパーツ単位のデザイン、特にUIパーツを探す際に活用したサイト。
以下の要素やパターンで絞り込みができる。
- パーツ（デスクトップ）
- レビュー
- メインビジュアル
- ヘッダー・グローバルナビ
- フッター
- ドロワー・メガメニュー
- ～省略～
- パーツ（スマートフォン）
- メインビジュアル
- ヘッダー・グローバルナビ
- フッター
- ボトムナビゲーション
- ドロワー
- ～省略～
- タイプ
- ブランドサイト
- コーポレートサイト
- ECサイト
- 動画配信サイト
- メディアサイト
- 採用サイト
- テイスト
- かわいい
- かっこいい
- スタイリッシュ・おしゃれ
- シンプル
- ～省略～
機能的なUIパーツのデザインが豊富に集まっている。サイト全体のレイアウトというよりは、ボタンのデザインをどうしようといった、より細かい部分のデザインを決めるときに参考になった。
Dsign Systemという項目があり、デジタル庁・Google・LINEヤフーなどのデザイン規則へのリンクがまとまっていた。規則があることで、迷うことが少なくなり、制作が捗った。
まとめ：まずは眺めてみる
個人ブログのデザインは、自由度が高い反面、何から手をつけて良いか分からず手が止まりがちだ。私自身、具体的なイメージが湧かずに制作が進まないときがあった。
しかし、ウェブデザインギャラリーサイトを活用し、なんとなくｲｲﾈ！と感じる要素を集めて組み合わせることで、たとえ完全なオリジナルではなくとも、自分なりに少しだけ楽しい気持ちになれるブログの方向性を見出せた。完璧なデザインを最初から目指すよりも、まずは手を動かして形にしてみるのが重要だ。
紹介したギャラリーサイトは、デザインのアイデアやヒントの宝庫だ。デザインに迷い、イメージがつかめずにいるなら、紹介したサイトを覗いてみてほしい。眺めるだけでも、あなただけのブログを作り上げるための確かな一歩となるはず。