レスポンシブなホームページ・Webデザイン事例

responsive

レスポンシブなホームページ・Webデザインをお考えの方へ
配色や構成などのデザインが参考になるホームページ・Webサイトをまとめました

法律事務所・弁護士

横浜市の弁護士のホームページデザイン例

ヘッダー部分が丸みを帯びてトリミングされたようなデザインとなっており、柔らかい印象を与えている。 横浜市の事務所ということもあり、ファーストビューには前面にみなとみらいの写真が使われている。写真に乗っているテキストは上の余白がなく下の...

法律事務所・弁護士

神奈川県横浜市中区太田町1-4-2 関内川島ビル7階

法律事務所・弁護士

インタラクティブでクオリティが高い秀逸な弁護士のホームページデザイン例

インタラクティブな動き、レイヤーずらし(わざと文字を写真からずらして配置する手法)、斜め線など、最近流行りのデザイン手法を全て盛り込んだような、非常にクオリティの高いホームページ。青色で統一されており、レスポンシブデザインなのでスマホにも対...

法律事務所・弁護士

神奈川県横浜市中区桜木町1-1-7 ヒューリックみなとみらい10階

法律事務所・弁護士

黒色のシンプルな北海道の弁護士のホームページデザイン例

黒色で統一された非常にシンプルなホームページ。取扱業務は法人の法務に特化しており、個人(相続や離婚問題)を対象していないことがわかる。 法人向けにデザインするのであれば、親しみやすさというより、高級感・信頼感が重要になるため、黒色で統...

法律事務所・弁護士

北海道札幌市中央区南1条西11丁目327番地 27ジュピタープレイス2階

法律事務所・弁護士

可愛らしくて親しみやすい北海道の弁護士のホームページデザイン例

丸字を活用した可愛らしい、親しみやすいホームページ。ファーストビューはそこまで凝ったデザインではないが、文字サイズが大きいこともあり、高齢者に優しいデザインとなっている。 ベースカラーを黄色としてポイントカラーで緑色を用いており、それ...

法律事務所・弁護士

北海道札幌市中央区大通西12丁目4 北海道高等学校教職員センター5F

法律事務所・弁護士

滋賀県のおしゃれな弁護士法人のホームページデザイン例

ファーストビューでは法律事務所の社員を前面に見せるデザインで、重なるように3つの相談フォームを設置している。ポータルサイトのような構成で各種サービスごとで特設サイトを別ドメインで用意しているという、力の入れ具合。 テーマが違うホームペ...

法律事務所・弁護士

滋賀県大津市京町3-3-1 A&M・OTSUビル

工務店・建築

ロゴがヘッダー写真の下に配置されているホームページデザイン例

全体的にフラットな仕上がりになっており、シンプルながらも写真が映える構成になっており、安心感・信頼感のあるホームページになっている。 一般的にホームページのロゴは最上部に配置するのが一般的だが、このサイトは見出し(ヘッダー)写真の下に...

工務店・建築

新潟県新潟市西蒲区打越乙186-6

法律事務所・弁護士

弁護士事務所っぽくない可愛らしいホームページデザイン例

弁護士事務所などの士業のホームページは青色をベースカラーに使ったサイトが非常に多いものの、こちらのホームページは緑色をベースカラーにしている。 代表が女性弁護士ということもあり、可愛らしい・柔らかい印象を与えるデザインとなっており、全...

法律事務所・弁護士

新潟県三条市元町17-11寿パークハイツ401

製造業

木の温もりが表現された製作所のホームページデザイン例

木製サッシや学校間仕切りを製作・施工する会社のホームページで、木の色や温かさが前面に押し出されたデザインとなっている。ロゴ含め、赤と黒の対比が色のメインとなっており、少し和風なテイストに仕上がっている。 Wordpressで構築されて...

製造業

新潟県村上市工業団地内339-22

工務店・建築

モダンでかっこいいガーデン株式会社のホームページデザイン例

サイトアクセス時、グローバルナビゲーションが降りてくる表現が印象的。またこちらのホームページの随所で使われている表現法だが、メインビジュアルや施工事例に見せたい情報を大胆に配置してきている。パッと目に飛び込む情報量の多彩さは、モダンな雰囲気...

工務店・建築

京都府京都市北区小山西大野町78

学校・大学

メインビジュアルの動画が印象に残る松本大学のホームページデザイン例

メインビジュアルではドローンで撮影されたと思われる動画がよく映えたデザインになっている。学びやすい環境を提供していることが伝わるよう、工夫していると思われる。 1スクロールしてすぐに学校のガイド情報がスライドで表示され、見やすくまとま...

学校・大学

長野県松本市新村2095-1

WEBメディア

デザインと動作のクオリティが非常に高い「FastGrow」

テクノロジー領域で活躍中の起業家・経営者のインタビュー記事を配信するメディア。デザインや動きのクオリティが非常に高く、数あるデザインをまとめてきた中でも、トップクラスにクオリティが高い。 一覧ページ 連載記事、通常の記事、イベン...

WEBメディア

東京都港区南青山2-11-17

WEBメディア

3カラム構成の動作が美しいWebメディア「BTCN」

ビットコイン、ブロックチェーン、仮想通貨などの情報を取り扱うニュースメディア。 3カラムで構成されており、右側はグローバルメニュー、中央は仮想通貨のマーケットのリアルタイム情報、メルマガ登録、広告、人気記事、左側はピックアップ記事と各...

WEBメディア

東京都品川区西五反田7-20-9

WEBメディア

無駄な装飾がないシンプルなWebメディア「BNL」

名刺管理サービス「Eight」が運営する、ビジネスネットワークを活用した新たな可能性を探るメディア。 「WIRED」と同様、白と黒でシンプルにデザインされており、ホワイトスペースを十分に活用して、かっこいい印象を与えている。 ...

WEBメディア

東京都渋谷区神宮前5-52-2

WEBメディア

スタイリッシュなWEBメディア「WIRED」

最新のテクノロジーや先端科学といった「未来のトレンド」を発信するアメリカ発のメディア。 白と黒のシンプルなデザインだが、写真のクオリティが高く、ホワイトスペースを活用し、かっこいい印象を与えている。フォントはMacにデフォルトで入って...

WEBメディア

東京都渋谷区渋谷2-11-8

WEBメディア

UI・UXの完成度が非常に高い「生活定点」のデザイン例

博報堂の研究所が24年分の生活者の観測データ約1,500項目を公開しているメディア。 丸みを帯びたフォントで、メインビジュアルはポリゴン状の幾何学模様が動作し続け、視覚的に定点観測というメディア色を高めている。こういったアニメーション...

WEBメディア

東京都港区赤坂5-3-1

工務店・建築

デザイン性が高い株式会社イトーキのホームページデザイン例

東証一部に上場しているオフィス空間をデザインする会社で、一見採用サイトのような印象を受けるホームページ。 2016年頃から、メインビジュアの写真の明度を落として、キャッチコピーを白抜き文字で配置する、というデザインが流行っているが、可...

工務店・建築

東京都中央区入船3-2-10

工務店・建築

シンプルながらも動作が美しい東急建設株式会社のホームページデザイン例

緑色をテーマカラーとしたホームページで、下層ページは2カラムで構成されている。 メインビジュアルの部分の写真は左右にスライドしつつ、パララックス(下にスクロールしても写真が移動しない仕組み)になっており、レスポンシブ対応している。 ...

工務店・建築

東京都渋谷区渋谷1-16-14

学校・大学

赤系統の色で統一された神戸女子大学のホームページデザイン例

赤系統の色で統一された、神戸女子大学のホームページ。メインビジュアルの写真は一定時間ごとに切り替わるようになっている。1カラムで構成され、レスポンシブでスマホ対応化している。 大人でクールな女性の写真が使われているせいか、どこかのブラ...

学校・大学

兵庫県神戸市須磨区東須磨青山2-1

学校・大学

横浜市立大学のホームページデザイン例

黄緑色でシンプルにデザインされたホームページ。全体的に余白が広く取られており、レスポンシブ対応している。下層ページでは最近よく見かける、写真にわざと被るようにタイトルを表示している。 少し余白を取り過ぎて間延びしてる感があるが、ごちゃ...

学校・大学

神奈川県横浜市金沢区瀬戸22-2

学校・大学

東京農業大学のホームページデザイン例

全て2カラムで構成されており、左側のカラムはウィンドウの高さで固定されてスクロールできないようになっている。他ページへ遷移すると、左側のメニューはそのページに応じた写真とキャッチコピーが表示され、まるでパンフレットを読んでいるような気になる...

学校・大学

東京都世田谷区桜丘1-1-1

1 2 3

結果に拘ったホームページ制作会社「AltBase LLC.」

作成しただけでは意味がないホームページ。弊社では結果に拘った成果の上がるホームページを制作いたします。見積もりは無料なのでお気軽にお問合せください。