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