スマホデザイン ランキング

natomi宿｜古民家をリノベーションした宿

URL / https://natomishuku.com/

古民家をリノベーションした宿のサイト。深緑の背景に「暮らすように旅する」のコピーと、縁側でくつろぐ写真が旅情を誘う。

月刊マツウラ

URL / https://matsuuratomoko.com/

個人ブログ「月刊マツウラ」。黒とベージュの2トーンにまとめた、雑誌のようなミニマルなタイポグラフィが心地よい。

meito

URL / 掲載終了

円形にトリミングした写真に、鳥のイラストを添えた、やさしい色合いの産後ケアホームのサイト。

okuru design｜大阪・北摂のデザイン事務所

URL / https://okuru-design.com/

大阪・北摂のデザイン事務所okuru designのサイト。白いカーテンの窓辺で木のテーブルに花を飾った写真と、手書き風のロゴで柔らかな雰囲気にまとめている。

【公式】CAFÉ DE FLEUR [カフェ ド フルール]

URL / 掲載終了

花に囲まれたカフェ「カフェ ド フルール」の公式サイト。天井一面のドライフラワーとシャンデリアが並ぶ店内写真を大きく見せている。

五木のアウトドア部

URL / https://itsuki-outdoor.com/

五木村のキャンプ場・アクティビティ情報サイト。写真やイラストをコラージュ風に散りばめた、楽しげなレイアウト。

Playthings to Love

URL / 掲載終了

木のおもちゃブランドKOTOKのサイト。動物や人の顔を描いたカラフルな木製人形を、白木のブロックの上に並べた写真が楽しい。

KEEPs

URL / https://keeps.homes/

雨漏り修理の窓口KEEPs。あたたかみのあるオリジナルイラストで、堅くなりがちな住宅修理の内容を親しみやすく見せている。

ANDMADE Inc.

URL / https://andmade.jp/

ほぼモノクロの余白たっぷりなレイアウトに、実績を小さなテキストリストで並べたデザインスタジオのサイト。縦書きの日付や「Colors of Sound」の音のアーカイブなど、細部の遊び心が光る。

ここち｜デザインパートナー

URL / https://cocochi.design/

デザイン事務所「ここち」のポートフォリオサイト。ロゴやイベントビジュアルの実績をカード状に並べたやさしい配色。

Tabio – サンダルガード

URL / https://tabio.com/jp/2026ss-sandal-guard/

靴下屋Tabioのサンダルガード商品ページ。パステルカラーと手描き風のあしらいで、かわいらしくまとめられている。

蒸 – 五箇サウナ

URL / https://musu-sauna.com/

京都・五箇サウナのプライベートアウトドアサウナ「蒸」。力強い書道文字をロゴに使った、和の情緒あるデザイン。

なごりおしい夜 クリエイター交流会

URL / https://nagorioshi-yoru.studio.site/

漆黒の背景に、ペンダントライトの下で作業する人物のシルエットを描いた印象的なオープニング。スクロールすると明るいグレー基調の紙の質感へ切り替わり、ざらついたグレインとタイポグラフィが夜の交流会の空気感を伝える。

信貴生駒スカイライン

URL / https://www.kintetsu.co.jp/leisure/skyline/

緑のトンネルのような道路写真に、車のイラストを添えた楽しいドライブウェイのサイト。

私はあなたを知らない、

URL / https://watashiramovie.com/

映画『私はあなたを知らない、』公式サイト。斜めにトリミングしたキャスト写真とシンプルな配色で見やすくまとまっている。

スゴイミライミッケ！｜東京理科大学

URL / https://www.tus.ac.jp/miraimikke/

東京理科大学140周年の特設サイト「スゴイミライミッケ！」。カラフルな図形と目玉アイコンが散りばめられた、遊び心のあるレイアウト。

夏の砂の上

URL / https://natsunosunanoue-movie.asmik-ace.co.jp/

映画『夏の砂の上』公式サイト。和紙のような質感と手書き風のタイトルロゴが、作品の温度感を伝えている。

Parade 伏見洋菓子店

URL / https://parade.kyoto/

京都・伏見の洋菓子店パレードのサイト。手書き風の筆記体タイポグラフィが上品で、お店の雰囲気をよく表している。

Toshiyuki Hashimoto

URL / https://toshiyukihashimoto.jp/

白い背景に大きなサンセリフ体の名前だけを置いた、潔いクリエイターのポートフォリオ。右下の書籍告知ボックスにだけ蛍光イエローを差し、細い縦書きの名前など控えめな細部にもこだわりが見える。

KIMIKA

URL / 掲載終了

ヘア&ボディケアブランドKIMIKAのサイト。左半分を淡いグレーの余白と英文コピー、右半分を深い森の写真に分けた落ち着いた構成。

MOBILE TOILET

URL / https://www.toyota.co.jp/mobile-toilet/

車いすユーザーの声から生まれた移動式トイレの紹介サイト。車で牽引するトイレトレーラーの写真とやさしいイラストで構成。

ウマジョブ 馬のお仕事紹介サイト

URL / https://jra-fun.jp/umajob/

鮮やかな黄色の背景に、現場の写真をコラージュのように敷き詰めた馬のお仕事紹介サイト。躍動感のある手書き風ロゴと、職種ごとに色分けしたカードで、堅くなりがちな採用情報を楽しく見せている。

お買い物はお仕事です

URL / https://daphnemeria-blog.com/

現役バイヤーによるお買い物ブログ「お買い物はお仕事です」。上品なファッション写真を大きく使った、雑誌のようなトップページ。

2025年度定期採用｜FELISSIMO

URL / 掲載終了

フェリシモの採用サイト。スクラップブック風にちぎり絵や写真を貼り合わせたコラージュで、ものづくりの現場を伝える。

FONDAN（フォンダン）

URL / https://fondan.jp/

黄色一色の背景に、焼き菓子の断面や生バターキャラメルのしたたる様子を大きく見せる、とろけるお菓子の専門店。スクロールに合わせて写真が大胆に切り替わり、商品の質感と余白の美しさが際立つ。

バナ穴 BANA_ANA

URL / https://bana-ana.com/

映画『バナ穴 BANA_ANA』公式サイト。バナナの穴、という大胆なモチーフを大きくあしらったグラフィカルなデザイン。

原宿サン・アド 50th

URL / https://h-sunad.co.jp/50th/

青一色のトーンに加工した人物写真のグリッドと、巨大な「50」のシンボルを組み合わせた50周年記念サイト。蛍光イエローの手書き風文字や赤い星形バッジが差し色になり、遊び心あふれるエディトリアルな見せ方に。

A Bite Coffee

URL / https://a-bite-coffee.com/

人物写真に「A Bite Coffee」の大きな白いロゴタイプを重ねた、食べるコーヒーのブランドサイト。ブラウンとクリーム色だけの落ち着いた配色で、写真の質感が引き立っている。

Tabio × FUDGE.jp

URL / https://tabio.com/jp/fudge02/

靴下屋Tabioとファッション誌FUDGE.jpのコラボ企画。手描き風の大きな文字とやわらかい配色がかわいい。

生理の悩み 相談しようプロジェクト

URL / https://www.tsumura.co.jp/seirino-nayami/

パステルブルーの背景にサンリオのキャラクターや手描き風の文字を散りばめた、生理の悩み相談キャンペーン。かわいいイラストと吹き出し風のUIで、デリケートな話題にも気軽にアクセスできるやさしい雰囲気にまとめている。

たぶん大丈夫

URL / https://tabundaijoubu.jp/

淡いピーチベージュの背景に、フォトグラファーが撮影した人物や静物の写真を大小さまざまなサイズでゆるやかに配置したフォトオフィスのサイト。整列しすぎないレイアウトが、写真を眺める楽しさを引き出している。

CABO

URL / https://cabo-uehara.jp/

「C A B O」の4文字を大きく離して配置した、余白を活かしたタイポグラフィが印象的な代々木上原の複合拠点サイト。建物の外観写真が1枚あるだけの潔い構成で、日英併記の本文も読みやすい。

Ucuuu

URL / https://ucuuu.net/

ピアニストYoko Komatsuのアルバム特設サイト「Ucuuu」。霧のかかった幻想的な写真とミニマルなタイポグラフィが美しい。

すべて真夜中の恋人たち

URL / https://www.bitters.co.jp/subemayo/

映画『すべて真夜中の恋人たち』の公式サイト。ダークな背景に縦書きタイトルだけを置いた、詩的で余白のあるデザイン。

愛 編む with you – Couturier

URL / https://www.felissimo.co.jp/couturier/iamwithyou/iamwithyou_ct.html

アイドル・宮脇咲良さんとのコラボ企画「愛 編む with you」。ハート型にトリミングした写真とキュートな配色が印象的。

SECOND IMPACT（セカンドインパクト）

URL / https://second-impact.jp/

極太の黒いロゴタイプを画面いっぱいに配置し、水しぶきの中に浮かぶシャンプーボトルを合わせたインパクト抜群のビジュアル。青と白の爽やかな色調が、商品名の力強さと好対照を生んでいる。

はちとワルツ

URL / https://hachi-to-waltz.com/

縦書きのロゴと、上下をくるくる縁取る糸のような線がかわいい、仙台・秋保温泉のカステラサンドの店。淡いクリーム色と金色でまとめ、手に取った写真のぬくもりが伝わる。

志和貨物自動車

URL / https://shiwakamotsu.co.jp/

運送会社とは思えないほど映画的な写真とタイポグラフィで魅せる採用サイト。意外性のある業種×デザインの好例。

planeta ORGANICA

URL / https://planeta-organica.com/

オーガニックコスメブランドplaneta ORGANICAのサイト。手描き風のボタニカルイラストと、音を使った演出が上品。

Salon.io – mikamiyui

URL / https://salon.io/mkmy

イラストを手がけるmikamiyuiのサイト。深い青緑の壁と、鍋やおたまの並ぶ台所を描いたざらりとした質感のイラストが印象的。

AFURI BREWING

URL / https://afuribrewing.com/

クラフトビールブランドAFURI BREWINGのサイト。プロダクト写真と背景の光の使い方が非常に洗練されている。

TWOTONE

URL / https://www.twotone.jp/

白い画面の中央に、手がけた実績を1枚ずつスライドで大きく見せるブランドデザイン会社のサイト。余計な装飾がなく、作品とタイトルだけで構成した潔さが心地よい。

漢方薬局は東京青山の東洋医学サロン MEGURU

URL / 掲載終了

東京・青山の東洋医学サロン・漢方薬局MEGURUのサイト。ミントグリーンの波線やドット柄で描いたゆるいキャラクターと、やわらかなコピーが親しみやすい。

neie – ネイエ

URL / https://neie.jp/

注文住宅・リノベーション会社のサイト。落ち着いたベージュトーンでまとめた器や植物の静物写真が上品で、暮らしの質感が伝わってくる。

ShinyShiny シャイニーシャイニー

URL / https://www.shiny--shiny.com/

大阪のベビー・キッズ英会話教室のサイト。英語ドリルに書き込む写真に赤い帯の「Hello Everyone!!」を添え、ピンクの曲線で柔らかくまとめている。

PLAYFUL | 美容家電ブランド【SALONIA(サロニア) 】公式サイト

URL / https://salonia.jp/limited/summer/
※掲載終了のため、トップページが開きます

美容家電ブランドSALONIAの2020年夏限定カラー「PLAYFUL」のページ。ミントと黄色の図形にサングラスやアクセサリーを散らした軽やかな構成。

日本タイポグラフィ協会

URL / https://typography.or.jp/

日本タイポグラフィ協会の公式サイト。グリッド状に配置されたポスターや誌面がそのままギャラリーのように並ぶ、シンプルで読みやすいレイアウト。

KAIZEN

URL / https://kaizen.tsk-corp.jp/

建設業向けDXサービスKAIZENのトップページ。プロダクト動画を中心に据えたミニマルな余白の使い方が上品。

ユースキン リニューアル特設サイト｜ユースキン製薬株式会社

URL / https://www.yuskin.co.jp/yuskin/

ユースキンのリニューアル特設サイト。クリーム色の背景に新旧のパッケージを線画と写真で並べ、変化をわかりやすく見せている。

スワロウテイル 4Kリマスター

URL / https://swallowtail4k.jp/

映画『スワロウテイル 4Kリマスター』公式サイト。フルスクリーンの写真にタイトルだけを重ねた、余白を活かしたムーディーな一枚もの構成。