自身の店舗や会社を持っている人、また個人の趣味などを発信したいという理由で、自らスマートフォンのサイト作りに挑戦する人も多いでしょう。
現在では特にプログラミングの知識はなくとも、専用のツールを用いることで、誰でも簡単にスマホ向けサイトを作成できます。
ただ、見やすく使いやすいサイトを構築するためには、技術やツールだけでなく、デザインのセンスが必要です。
ここでは、スマホサイトの作り方はわかってもセンスが、と悩んでいる人のために、スマホサイトのデザインの参考になるサイトを紹介していきます。
さまざまなスマホサイトのデザインリンク集
ここではまず、主にスマホサイトのデザインを集めたサイトを紹介します。
「web design clip[s]」
さまざまなスマホサイトやレスポンシブWebデザインのクリップを集めたリンク集です。
デザインをクリックすることでそのサイトの詳細も確認できます。
「sps collection」
さまざまなスマホサイトのデザインを最大100件ずつ確認できるデザインリンク集です。
カテゴリや色合い別に確認もできます。
「スマートフォンサイト集めました」
新たなスマホサイトができるたびに更新されるので、最新のサイトデザインを確認できる上、掲載数も400以上と多数になります。
サイトの色や業種でカテゴリ分けもでき、またサイトごとについているユーザーからの評価も参考になります。
「pttrns」
海外サイトなので英語表記になりますが、スマホサイトで優れたデザインやUIのものを紹介しているサイトです。
スマホとタブレット、パソコンを比較できるサイトデザイン集
ここではスマホサイト以外に、同じサイトのタブレット版、パソコン版を見比べることのできるサイトを中心に紹介します。
「iPhoneDesignBox」
主に国内のスマホサイトをまとめたデザインギャラリーです。
クリックするとパソコンとスマホ双方のサイトデザインを見比べることができます。
「inspiredUI」
iphone、ipad、androidの3機種に対応するサイトデザインを集めたサイトです。
ひとつのサイトについて多数の画像が掲載されているため、デザインを考える上で参考になります。
「Responsive Web Design JP」
レスポンシブデザインを集めたサイトです。
ひとつのサイトにつき、それぞれスマホ、タブレット、パソコンの三通りのデザインを掲載しています。
「Media Queries」
海外のレスポンシブデザインを集めたサイトです。
こちらも同じサイトでスマホ、タブレット、PCのデザインがそれぞれ掲載されています。
アイコンデザインの参考になるデザイン集
ここではスマホサイトでは必須になる、ホーム画面に表示されるアプリのアイコンデザインの参考になるサイトを紹介します。
「iconDrop」
アイコンデザインをまとめたギャラリーです。
詳細ページでは同じ系統のアイコンをまとめて確認することもできます。
「iOSpirations」
豊富なアイコンデザインを集めたサイトです。
アイコン以外にも、スマホサイトのデザインも掲載されているため、スマホサイトを作る上では全体的なデザインの参考になります。
「Dribbble」
世界中のデザイナーが作成したデザインを見られるサイトです。
まとめ
スマホサイトを製作する上で、サイトのデザインをゼロから考えるのは難しいものです。
といっても既存サイトとあまりにも類似していると盗用の批判を受ける恐れもありますが、
複数の参考サイトを参照し、部分や要素を組み合わせて製作すれば、オリジナル性のあるサイトを作ることは十分に可能です。
たとえ既存のサイトを参考にしても、その組み合わせ方、アレンジの方法などで個性が出ます。
気に入ったデザインをヒントに、自分なりの工夫をすることがオリジナルへの第一歩なのです。
