スマホサイトをデザインするとき参考になるWebサイト5選
こんにちは。Webデザイナーのミライです。
突然ですが、ギャラリーサイトで今日掲載されたサイトを見て、学ぶことがあったり燃えることがあったりしませんか？
あなたが刺激と戦う心、学びを得るために、知りうる限りのギャラリーサイト24サイト押し売りします。
多すぎ！ って思った方安心してください。目次と、僕の評価軸を駆使すれば快適にこの記事を見れるはず……。
あなたの日々の時間に、刺激と戦う心と学びを与えられますように。
目次
※この記事は2022年5月に編集部が情報を更新しました
更新頻度が高いサイト
更新率が高いものをまとめました。
MUUUUU.ORG
| 更新頻度 | ★★★★☆ |
|---|---|
| 見やすさ | ★★★★★ |
| 検索しやすさ | ★★★☆☆ |
- ポイント
-
- とにかく見やすい
- 他サイトにないカテゴライズ
- ここ見れば何かあるだろうという安心感がある
ずーっとそばにいて、業界の潮流を教えてくれているような、頼りになるサイトです。
僕が参考サイトを探すときは必ず見るギャラリーのひとつです。専門学校のときからお世話になってて、勝手に勉強させてもらい育てていただきました。ありがとうございます。
81-web.com
| 更新頻度 | ★★★★★ |
|---|---|
| 見やすさ | ★★★★★ |
| 検索しやすさ | ★★★☆☆ |
- ポイント
-
- サムネイル（ファーストビュー）重視
- SNS上で盛り上がっているサイトがわかる
- いいなと思ったサイトをまとめられる
平日1日1サイト、コンスタントに上がります。サムネイルをホバーするまでは、見えている情報が最低限のものなので、情報よりも見た目で見たい！ 流し見でざっと見たい！ という方にぴったりです。
favorite機能（サムネイル右下の「+」ボタンで保存）を使って、必要なサイトをまとめていくことができます。
I/O 3000
| 更新頻度 | ★★★★★ |
|---|---|
| 見やすさ | ★★★★☆ |
| 検索しやすさ | ★★★★★ |
- ポイント
-
- ほかのサイトでは見ないようなサイトもよく掲載される
- 表現的にイケてるサイトがよく掲載される
このサイトはテキスト検索ができるので非常に便利です。また掲載されているものも、見栄えや設計が良いものが多いので「ここ見れば大丈夫！」という安心感がすごいです。
Web Design Clip
| 更新頻度 | ★★★★☆ |
|---|---|
| 見やすさ | ★★★☆☆ |
| 検索しやすさ | ★★★★★ |
- ポイント
-
- 日本サイトが多い印象
- 検索で「レイアウト」「採用サイト特集」とユニークなものがある
レイアウトから検索したい！ 日本サイトで参考を探している！ という方にオススメなギャラリーです。詳細ページでは、類似サイトが提示されるので、探し物中の方に優しいサイトになっています。サイドバーには、SPサイトのまとめWeb Design Clip [s]、LPのまとめWeb Design Clip [L]へのリンクがあるのでカバー範囲も広いと感じます。
bookma!
| 更新頻度 | ★★★★★ |
|---|---|
| 見やすさ | ★★★★☆ |
| 検索しやすさ | ★★★★☆ |
- ポイント
-
- 更新頻度がめちゃくちゃ高い
- パソコンとスマホのビューが並びで見れて、それぞれフィルターでも絞れる
このサイトは高クオリティのサイトがものすごい数更新されます。1日5〜6サイト更新されることも少なくないです。ホバーするまでサイト情報がサムネイルのみなので、流し見できます。
straightline bookmark
| 更新頻度 | ★★★★☆ |
|---|---|
| 見やすさ | ★★★★★ |
| 検索しやすさ | ★★★☆☆ |
- ポイント
-
- 表現的にイケてるサイトが多い（ミニマルより）
- 1日2〜3サイト掲載される
- サムネイルサイズをいじくれる
表現にこだわったサイトが多いなあという印象です。「ホーム（editor picks）」でも、結構な掲載数ですが、メニューから「all」にいくことで件数がもっと増えます。表現のアイデア探しなら是非一度ご訪問あれ。
ikesai.com
| 更新頻度 | ★★★★★ |
|---|---|
| 見やすさ | ★★☆☆☆ |
| 検索しやすさ | ★★★☆☆☆ |
- ポイント
-
- 掲載数がいい感じ
- 飾った感じのないサイトも掲載している
S5-Style
| 更新頻度 | ★★☆☆☆ |
|---|---|
| 見やすさ | ★★★★★ |
| 検索しやすさ | ★★★☆☆ |
- ポイント
-
- おしゃれ……！ っていうサイトが掲載される
- 動きの多いサイトが掲載される印象
- 毎日更新されるわけではない
このサイトに載っているサイトはとりあえずおしゃれです。ゴリゴリ系のものも多く感じるので、おしゃれさを充電したい方にオススメ。
現代デザイン
| 更新頻度 | ★★★★☆ |
|---|---|
| 見やすさ | ★★★☆☆ |
| 検索しやすさ | ★★☆☆☆ |
- ポイント
-
- サイトに行かなくても下層が見れる
- 検索がイマイチ（でも掲載された時間で絞れるのはたまに重宝します）
一番の特徴は、下層もチラ見できること。サイトに飛んでから「あれ……思ったのと違かった……」という時間ロスが軽減できます。ほかのギャラリーでピックアップされていないサイトもここにはありました。
Siteinspire
| 更新頻度 | ★★★☆☆ |
|---|---|
| 見やすさ | ★★★★☆ |
| 検索しやすさ | ★★★★★ |
- ポイント
-
- 一度に上がる量が多い
- そのぶん表現のクオリティは掲載されるサイトにムラがある
掲載される量がほかを圧倒しています。とにかく量を見たい！ という方にオススメです。検索フィルターが結構細かく用意されているので、検索はしやすそうです。
1GUU
| 更新頻度 | ★★★★★ |
|---|---|
| 見やすさ | ★★★★★ |
| 検索しやすさ | ★★★★★ |
- ポイント
-
- ほかのサイトでは見ないようなサイトもよく掲載される
- 国別でフィルターできる
- アニメーションのサムネもある
- 1日2〜3サイト掲載される
おしゃれかつあまりほかのまとめサイトに掲載されていないサイトが載っているので非常に重宝しています。とくに国別フィルターとアニメーションするサムネが斬新ですので試しに見てみてください！
独特な雰囲気のサイト
なにかに特化しているものをまとめました。
HOVERSTAT.ES
| 更新頻度 | ★★☆☆☆ |
|---|---|
| 見やすさ | ★★★★☆ |
| 検索しやすさ | ★★★☆☆ |
- ポイント
-
- 鬼のように動くサイトばかり
- サイト訪問しなくてもホバーで動きを確認できる
日本サイトはないですが、ゴリゴリ動くサイトが集まっているのでみているだけで楽しいです。更新はまちまちな印象。
LPアーカイブ
| 更新頻度 | ★★★★★ |
|---|---|
| 見やすさ | ★★★☆☆ |
| 検索しやすさ | ★★★☆☆ |
- ポイント
-
- LP特化
- 1日に10サイト前後更新される
- サイトキャッチコピーの一覧表示ができる
LPに特化したギャラリーです。更新頻度がすばらしい。検索の条件指定も魅力的ですね。LPの重要な要素であるキャッチコピーを一覧で見れる機能はほかにはありません。
スマホ対応もしているサイト
モバイル対応もしっかり確認できるサイトをまとめました。
AGT
| 更新頻度 | ★★★☆☆ |
|---|---|
| 見やすさ | ★★★★☆ |
| 検索しやすさ | ★★★☆☆ |
- ポイント
-
- スマホビューの画像が貼ってあるので、ブラウザの機能をいちいち使わなくていい
- TOPでもスクロールで広い範囲を確認できる
新しく、高クオリティのサイトのスマホビューを見れるサイト。PCと並べて見ることはできませんが、SPビューの広い範囲をサイト内で確認することができます。
Responsive Web Design JP
| 更新頻度 | ★★★★☆ |
|---|---|
| 見やすさ | ★★★★☆ |
| 検索しやすさ | ★★★☆☆ |
- ポイント
-
- スマホ / タブレット / パソコンそれぞれのビューを並べて見れる
- けっこう頻繁に更新される
デザインをブレイクポイントごとに並べて表示してくれるギャラリーです。クオリティの高いものが多く、趣向もさまざまなので、参考サイトを見つけやすいです。項目ごとの「+MORE」を押すと、サイトの概要などを表示してくれます。
▼モバイルサイトのデザインについて、こちらも併せてご覧ください
クオリティの高いサイトを上げているサイト
マメにサイトを見に行くには頼りないけど、たまにサイトを探しに行くときは力強い相棒になってくれるサイトを紹介します。
Siiimple
| 更新頻度 | ★★☆☆☆ |
|---|---|
| 見やすさ | ★★★★★ |
| 検索しやすさ | ★★★☆☆ |
- ポイント
-
- シンプルな見ため
- ミニマルよりサイトが多く掲載されている
- 量を見たい、検索しながら見たいという方には見にくいかもです
すっきりとした見た目で、すっきりとした見た目のサイトを見れるサイト。ミニマルなサイトやレイアウトの参考を探している方にオススメです。海外サイトのみ。
SiteSee
| 更新頻度 | ★★☆☆☆ |
|---|---|
| 見やすさ | ★★★★☆ |
| 検索しやすさ | ★★★★★ |
- ポイント
-
- Collectionページなど検索しやすいコンテンツが嬉しい
- Webサービスなども掲載されている
- 魅力的なファーストビューのものが多い
このサイトは、上がっているサイトのクオリティが高いのはもちろんですが、検索するときに、メニューにある「search」「filter」「Collection」が支えてくれるところが魅力です。Collectionは数こそ少ないですが、嬉しいコンテンツですね。
Flat design gallery
| 更新頻度 | ★★★☆☆ |
|---|---|
| 見やすさ | ★★★★★ |
| 検索しやすさ | ★★★☆☆ |
- ポイント
-
- フラットデザインを採用したサイトが掲載されている
- 更新頻度は低い
Landingfolio
| 更新頻度 | ★★☆☆☆ |
|---|---|
| 見やすさ | ★★★★★ |
| 検索しやすさ | ★★★★☆ |
- ポイント
-
- 海外サイトのLPが並ぶギャラリー
- サービスLPやデザインツールのLPが多い
海外サイトのLPが並ぶギャラリーです。サービスのLPやデザインツールのLPなどが多く、海外サイトの、独特なレイアウトのサイトが閲覧できるので、見ていてワクワクします。
TAU MAGAZINE
| 更新頻度 | ★★☆☆☆ |
|---|---|
| 見やすさ | ★★★☆☆ |
| 検索しやすさ | ★★★☆☆ |
- ポイント
-
- 大学・採用サイトなどの企業サイトが多い
サイトタイトルの説明はお堅い印象を受けてしまいますが、実際に掲載されているサイトは、必ずどこかにユニークさを感じるものが多い印象です。
アワード系のサイト
ここはもう説明も評価軸もなしでいきます。トレンドを追いたい。表現の参考を探しているという方は、ぜんぶ見てみてください。
Awwwards
Digital Design Award
CSSREEL
The FWA
デザイナー厳選！毎日見たいサイト
いままで出てきたなかで、僕が特にオススメするサイトをまとめました。海外と日本のさまざまなジャンルを網羅できるようにしています。
11サイトをチョイスしました。
- Awwwards
- CSSREEL
- The FWA
- I/O 3000
- MUUUUU.ORG
- S5-Style
- bookma!
- straightline bookmark
- 現代デザイン
- Responsive Web Design JP
良いデザイン・悪いデザインとは
ここまでWebデザインの参考になるサイトを紹介してきましたが、そもそもデザインの良し悪しは何で決まるのか気になりませんか？せっかくこの記事をご覧になってくれたので、このあたりも簡単にですがお伝えできればと思います。
レイアウトの基本原則を満たしているか
レイアウトとは、”配置”することをいいます。画像やテキスト、ボタンをどこに配置すると効果的なのか考える作業です。
レイアウトをするときはただ並べるのではなく、基本原則を満たしたレイアウトになっているかが、良いデザイン・悪いデザインを分けるポイントになります。
- レイアウトの基本原則４つ
-
- コントラスト：情報の優先度により、要素の目立ち具合に差をつける
- 反復：デザイン上の各要素を繰り返し使用する（罫線、色、アイコンなど）
- 整列：各要素の位置や大きさ、形、色などを揃える
- 近接：関連する項目をまとめて配置する
目的に沿ったデザインであるか
続いて重要なのが、目的に沿ったデザインであるか、ということです。「おしゃれなサイトにしたい」「かっこいいサイトにしたい」といったWebサイトを作る側の想いも大切ですが、忘れてはいけないのはそのWebサイトを使う人の立場になってデザインができているかという点。
「どんな人に、なんのために使ってもらうのか？」これを忘れて作る側目線のサイトになってしまえば、いくらおしゃれでかっこいいサイトでも、良いデザインとは言えませんよね。
とても当たり前のことですが、これが結構難しいんです。サイトを制作しているうちにいつのまにか自分視点になってしまうので、この点は強く意識するようにしています。
使いやすいかどうか
先ほどの内容と少し被りますが、使いやすいのかどうかも良いデザインの条件です。
サイトを使うシーンや使われ方のイメージを膨らませることで、必要な要素・不必要な要素が見えてきます。
Webデザインを行うために習得すべきべスキル
Webデザインを行うWebデザイナーの仕事についても、簡単にご紹介できればと思います。
習得すべきスキル
Webデザイナーを目指す人が習得すべきスキルを４つ紹介します。
Webデザインの基礎知識
先ほどお伝えしたレイアウトの基本原則のように、デザインには基本となる考え方がいくつか存在します。例えば、配色ルールやフォントの考え方です。
こういった知識をつけることで、「デザインをしているうちに何が正解なのかわからなくなってきた」という事態を防げるようになります。
デザインツールの操作スキル
続いて重要なのが、デザインツールの操作スキルです。Webデザインの仕事では、主にAdobeのPhotoshop / Illustratorを使ってデザイン制作をします。
- Webデザインツールの主な用途
-
- Photoshop：主に高度な写真加工に使用
- Illustrator：写真以外のグラフィックを作るときに使用
最近では上記の２つ以外にも、 XD / SketchといったWebデザインツールが使われることが多くなっていますが、まずは汎用性が高いPhotoshop / Illustratorを使えるようになることをおすすめします。
コーディング知識
Webデザインは制作して終わりではなく、ブラウザ上に反映させる作業があります。たくさんの言語がありますが、HTMLとCSSの知識は最低限必要です。
HTMLはマークアップに使用し、CSSはそれを装飾するために使う言語です。
SEO対策に関する知識
サイトは誰かに見てもらわなければ制作した意味がありません。そこで必要になるのが、SEO対策の知識です。SEOとは Search Engine Optimizationの略称で、検索エンジンで上位にくるようにサイトを最適化することをいいいます。
WebサイトのSEO対策は細かな要素がたくさんありますが、サイト構造をユーザーにとってわかりやすくすることや、最適なHTMLタグでマークアップすることは最低限身につけておきたい知識です。
独学でもなれるの？
結論、独学でWebデザイナーになることはできます。（LIGにも未経験から独学でWebデザイナーになった人がいます。）
ただし、独学でWebデザインを学ぶことは、時間の融通が利く一方で、プロからのアドバイスがもらいにくいなどのデメリットも。結果的に遠回りになってしまう場合もあるので、自分にはどんな学習方法があっているのか見極めることが大切です。
独学でWebデザイナーになったLIGのWebデザイナー：おまめさんの実体験が以下記事にまとまっているので、よろしければ参考にしてください。
未経験から独学でWebデザイナーになるために必要なこと【実体験】
Webデザインの参考になる本・コンテンツ
デザインってどんなもの？という初心者の人におすすめのデザイン本。
デザイナーだけでなく非デザイナーが読んでもわかりやすい本です。かわいいし、見ていて楽しい。言葉で論理的に説明するとわかりづらくなってしまう部分を、直感的に表現してくれています。
コンパクトにまとまっているので、これからデザインを学びたい方の導入本としておすすめです！
そもそもデザインってなんなの？ という部分から、制作のフロー、基礎知識まで幅広く紹介しています。
とても情報量が多いので本気度が要求されます。全体の解説をしてくれるので、学び始めの人におすすめです。
▼Webデザインの参考になる本は、以下記事で詳しく紹介しているので、併せてご覧ください。 初心者におすすめのデザイン勉強本25選【デザイナー厳選】
また、僕は毎日見ているサイトのなかで気になるものをじっくり見てみたりトレースして、刺激と学びをもらっています。
騙されたと思ってはじめてみてください！けっこう身になります。
▼トレースに関してはこちらの記事を参考にしてみてくださいね 引き出しを増やしてスピードアップ！デザイントレースのやり方【初心者向け】
独学でつまずいていませんか？
Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。どんなスクールがあって、どんな内容が学べて、費用はどれくらいするのか、情報として持っておいて損はないはず。下記におすすめスクールを集めてみました！
2022年5月Webデザインスクールおすすめ11校を徹底比較！
