スマホサイトをデザインするとき参考になるWebサイト5選

こんにちは、デザイナーのモモコです。

今回はスマートフォンサイトをデザインするときの注意点と、スマートフォンサイトやスマートフォン用のアプリ、レスポンシブWebサイトをデザインする際に参考になるUIやトレンドのリンク集、ギャラリーサイトをご紹介します。

海外のトレンドや人気のあるサイトをまとめてチェックできますよ。

※この記事は2022年2月に編集部が情報を更新しました

スマートフォンサイトをデザインするときの注意点

今はほとんどのサイトがスマホ対応になっていますが、スマホの対応がされていないPCサイトをスマホで見ると、文字が小さすぎて「拡大しないと見られない……」なんてこともあるんじゃないでしょうか。

普段何気なくPCサイトもスマホサイトも見ていますが、スマホサイトならではの特性があります。

縦長の画面に合わせたコンテンツ

先ほども少し話しましたが、PCサイトの横長のコンテンツをそのままにしてしまうと文字が小さくなってしまいます。

縦長の画面に合わせた文字の大きさ、画像の大きさにする必要があります。

容量を軽くする

PCで表示していた画像をそのままスマホで表示してしまうと容量が大きすぎて読み込みに時間がかかってしまう場合があります。

スマホでもスムーズに読み込める容量にすることが大切です。

指で操作するのに適切なコンテンツ

スマホは指で操作するので、タップするボタンを適切な大きさにする必要があります。

操作してただけで変なボタンを押してしまった……とならないようにも、ボタンサイズはPCより大きくします。

デザインやUIの参考になるギャラリーサイト

1. AGT

http://agtsmartphonedesign.com/

 
更新頻度　　　:　★★☆☆☆
見やすさ　　　:　★★★★★
検索しやすさ　:　★★☆☆☆

ポイント

• TAGSからカラーやカテゴリでスマホサイトを検索できる
• 新しいサイトから古いサイトまで、掲載されている数が膨大
• 日本のサイトから海外のサイトまで幅広く掲載

国内外のスマートフォンサイトのデザインギャラリー。

マウスオーバーで縦に長いキャプチャが表示されるのが特徴的です。

2. iPhoneデザインボックス

http://design.web-hon.com/

 
更新頻度　　　:　★★★★☆
見やすさ　　　:　★★★☆☆
検索しやすさ　:　★★☆☆☆

ポイント

• 色や職種、日本／海外などのカテゴリでスマホサイトを検索できる
• SNSで話題になっていたサイトはだいたい網羅されている
• 日本のサイトが多め

主に国内のスマートフォンサイトがまとめられたデザイン集。PC、SP両方のTOPページがキャプチャされていて、見比べることができます。ありがたいですね。

私は訪問するたび、ロゴの横にいるパンダに癒されています。

3. WenDesignClip

https://sp.webdesignclip.com/

 
更新頻度　　　:　★★★★★
見やすさ　　　:　★★★★☆
検索しやすさ　:　★★★☆☆

ポイント

• スマホサイトのほかにも日本、海外、ランディングページに特化したページもある
• カテゴリーは幅広いが、採用ページやコーポレートサイトが多め
• 更新頻度が高い

主に国内のスマートフォンサイトがまとめられています。海外のサイトは英語だけでなく、韓国のサイトも。

更新頻度が高く、デザインが話題になっていたサイトが網羅されています。

4. SANKOU! sp

https://sankoudesign.com/sp/

 
更新頻度　　　:　★★★★☆
見やすさ　　　:　★★★★☆
検索しやすさ　:　★★★★☆

ポイント

• ファッションやコスメのサイトが多い
• 検索窓があり、単語で検索できる
• 更新頻度が高い

主に国内のスマートフォンサイトがまとめられています。ファッションやコスメなど、おしゃれなサイトが多いです。

どこかあたたかみのあるサイトが多い印象です。

5. iconDrop

http://icondrop.net/

スマートフォンサイトを作る際に必ず必要になるWebクリップアイコン、アプリアイコンをまとめたサイト。

詳細ページに同じ系統のアイコン一覧が出てくるのは、探しやすくて便利ですね。

その他お役立ち記事

▼Webデザインの参考になるサイトをまとめています。

Webデザインの参考になるギャラリーサイト24選

国内・海外別で紹介！かっこいいギャラリーサイトまとめ27選

まとめ

国内に限らず海外のトレンドも非常に参考になりますね。幅広いデザインやUIの引き出しを持つことで、ユーザーが求める使いやすいWebサイトに近付いていけるのだと思います。

それでは、また。

独学でつまずいていませんか？

Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。どんなスクールがあって、どんな内容が学べて、費用はどれくらいするのか、情報として持っておいて損はないはず。下記におすすめスクールを集めてみました！

2022年5月Webデザインスクールおすすめ11校を徹底比較！