WEBデザイナー向け無料電子Book >受け取りはこちら

めっちゃ参考になる!スマホデザイン特化のギャラリーサイト8選

めっちゃ参考になる!スマホデザイン特化のギャラリーサイト8選

WEBサイトを制作するときには参考をいくつか見てからイメージを膨らませる方が多いと思います。

勉強のために日頃からギャラリーサイトを眺めているという方もいるかもしれませんね。

また最近は、スマートフォン特化のサイトデザイン依頼も増えてきました。

2023年現在、スマートフォンの普及率はおよそ90%と非常に高いため、WEBサイトをデザインするときにはスマートフォン版のデザインも考慮しなければなりません。

そこで今回は、スマホデザインに特化したギャラリーサイト8つと、スマホサイトをデザインするときに知っておきたいコツをご紹介します。

ぜひブックマークして、いつでもチェックできるようにしておきましょう!

※ギャラリーサイトとは?

ホームページ(HP)やランディングページ(LP)、バナーなどのデザインが集まっているサイトのこと。

デザインを作るときに参考にするのはもちろん、普段から眺めてアイデアをストックしているデザイナーさんも多いです。

\ 14364人にセミナーをして分かった!/

目次

RWD JP(レスポンシブウェブデザインJP)

おすすめポイント

パソコン版、スマートフォン版、タブレット版それぞれのデザインを並べて確認することができます◎

iPhoneデザインボックス

おすすめポイント

掲載されているデザイン数が多く、いろんなタイプのデザインを見ることができます。

サイトデザインが若干古く、使いにくいのがデメリットです。

sps collection

おすすめポイント

シンプルで洗練されたデザインを多く掲載しています。

更新頻度もとても高いです。

AGTスマートフォンデザインギャラリー

おすすめポイント

クオリティの高い参考ばかりで、眺めているだけで楽しいサイト。

サイト自体も使いやすいので、個人的にかなりお気に入りなサイトです。

SANKOU!sp

おすすめポイント

ギャラリーサイトとして有名な「SANKOU!」のスマホ特化サイト。

検索しやすいのが特徴です。

姉妹サイトも、使いやすくておすすめです。

WebDesignClip

おすすめポイント

国内外のサイトを取り扱っていて、更新頻度も高めです。

Twitterアカウントで新しい参考デザインも流してくれています。

bookma!

おすすめポイント

とてもおしゃれなので、見ているだけで気分が上がります。

赤い矢印のところをクリックすると、スマホだけのデザインが表示されます。

スマホサイトをデザインするときのコツ

最後に、スマホサイトをデザインするときのコツを5つご紹介します。

デザインはシンプルにする

スマートフォンでのデザインは、できるだけシンプルにしましょう。

パソコン画面でデザインを作っているときにはつい忘れがちですが、スマートフォンの画面は想像より小さいです。

あれもこれもと詰め込んでしまうと、サイト全体がごちゃごちゃした印象に。

PC版のデザインを元にスマホ版を作る場合も、できるだけ装飾を減らしたりシンプルなデザインになるように意識してみてくださいね。

容量を軽くする

容量が重いと、サイトの読み込みに時間がかかってしまいます。

みなさんも経験があるかもしれませんが、開こうとしたページの読み込みが遅かったときはイライラしたり諦めて違うページを開いたりしませんでしたか?

サイトが重いとユーザーにストレスを与え、離脱につながる可能性も高くなるので、よく注意しましょう。

特に画像の圧縮は大切です。無料で画像を圧縮できるサイトもいくつかあるので、ぜひ活用してくださいね。

おすすめの無料圧縮サイト→iLoveIMG

ボタンは大きめに作る

先ほどもお伝えしましたが、スマートフォンの画面は想像より小さいです。

ボタンが小さいとクリック数が下がってしまうので、いつもより少し大きめに作りましょう。

また、普段ネットサーフィンをしていて、「このサイトのボタンは押しやすいな」「このくらいのボタンサイズがいいな」と思ったサイトがあればブックマークして保存しておくのもおすすめです。

今回ご紹介したギャラリーサイトにも、ボタンがついているサイトがいくつも載っているのでぜひ参考にしてくださいね。

フォントサイズは16px

スマートフォンサイトでは、16pxが最も良いフォントサイズと言われています。

それより小さいと読みづらく、大きいとスクロールが増えてストレスになるそうです。

サイトのターゲットが高齢者や小学生以下の子どもである場合は、20〜22pxくらいを使用すると見やすくなります。

また、行間のおすすめは1.5emです。

ファーストビューにとにかくこだわる

こちらはコツと呼べるかわかりませんが…スマートフォンサイト作成時は、ファーストビューにとにかくこだわりましょう。

その理由はこの2つです。

  • PCサイトよりもファーストビューの範囲が小さいから
  • スマホの操作ではサイト離脱がしやすいから

特に、スマートフォンサイトでは小さい画面のファーストビューでユーザーを惹きつけなければなりません。

ただPCサイトと同じファーストビューを入れるだけでは離脱される可能性が高いのです。

ファーストビュー:WEBサイトを開いたときに1番最初に目に入るエリアのことです

スマホデザイン参考サイトまとめ

今回は、スマホデザインに特化したギャラリーサイトを8つご紹介しました。

私も実際にブックマークしてよく使っているサイトです。

いまはまだデザインが半人前という方も、サイトを眺めているだけでセンスはぐんぐん身につきます。

ぜひ通勤通学の時間やちょっとしたスキマ時間に、今回ご紹介したサイトを眺めてみてくださいね!

▼ ▼ 限定公開中 ▼ ▼

当メディアを運営している日本デザインスクールは、これまで14364人WEBデザイナーの仕事についてお伝えする無料セミナーを開催してきました。

その中で気づいたのが、WEBデザイナーへの誤解がある方が多いということ。中には一度勉強に失敗してからセミナーに来て「先に知りたかった」という方もいらっしゃいます。

そのような方が増えないために、特に多かった15の誤解を1つの資料にまとめました。勉強を始めてから後悔しないよう、ぜひ受け取ってください。

※非常に人気の資料であり、今後有料化する可能性もあるのでお早めに手に取ってくださいね。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

質問や感想があればご記入ください

コメントする

目次