LoginSignup
17
18

More than 3 years have passed since last update.

webデザイン 良質デザイン

Last updated at Posted at 2020-01-25

グリッドデザイン

ミーティア

ブログ投稿のグリッドデザインの参考になる
https://meetia.net/
ミーティア_MEETIA____ Music、CultureのWebマガジン.jpg

100TOKYO

同じく、ブログ投稿のグリッドデザインの参考になる
http://100tokyo.jp/
100_Tokyo_-_Creative_venues__products_and_people_in_Tokyo__Japan_.jpg

KINFORK

2カラムのグリッドデザイン
左側に大きめの画像、右側に小さめの画像を数点 というデザイン
視線誘導をある程度操作しやすい
https://kinfolk.com/
image.png

チャリツモ

https://charitsumo.com/
ウィンドウの横幅によって表示列数が変動するレスポンシブデザイン
image.png

BENOIT CHALLAND

http://www.benoitchalland.com/projects
画像をホバーすることで、背景色とテキストを表示させるアニメーションが入る
こちらも横幅によって表示列数が変動するレスポンシブデザイン
image.png

パララックス

muraflex

https://muraflex.com/en
画像とテキストをアトランダムに配置し、テンポのいいデザイン
image.png

melanie

スクロールをすると文字のアニメーションが入る
背景、画像、テキストのスクロールスピードを調整していて、立体感のあるデザイン
http://melanie-f.com/en/
image.png

イベント系

予約ページ

日程入力がカレンダーから選択できる
フォームステップもわかりやすい
https://fb211e.b-merit.jp/0362787492/web/reserve2/?shop_user_id=23400&from_option=1
予約_-_日時・指名選択_-_Hair&Life_Design_TREE.jpg

セミナー日程ページ

日付がth、時間をtdに置く
スケジュールが直感的にわかりやすい
https://biennale.tuad.ac.jp/2016/calendar
イベントカレンダー|みちのおくの芸術祭_山形ビエンナーレ2016.jpg

プロフィール紹介

直線を多用し、信頼感を演出している
顔写真に微妙なパララックスをつけ、浮遊感も出している
https://daikanyamalaw.com/
代官山綜合法律事務所.jpg

特殊系(見ていて面白い)

鈴乃屋

縦書きデザイン
和風なコンセプトを伝えたい時に参考になる
ハンバーがメニューのアニメーションが秀逸
https://www.suzunoya.com/kinu/

image.png

renaterechne

スクロールで画面が回転するデザイン
斬新さを表現したい時に使用できる
http://www.renaterechner.at/en/
image.png

美容室MILLOR

フェードイン、ホバーのアニメーションが面白い
https://www.millor.jp/
美容室MILLOR(ミラー)___神奈川県武蔵小杉駅のヘアサロン・美容院.jpg

レスポンシブデザイン作成における参考技術

グリッドシステム

FlexBoxの使い方

アニメーションjs


HTMLテンプレート

http://photoshopvip.net/111506
より一部引用

namari

ヒーロヘッダー、グリッドデザイン、レスポンシブデザインが揃った使いやすいテンプレート
https://shapingrain.com/downloads/demos/namari/index.html

Namari_-_Free_Landing_Page_Template.jpg

megakit

ヒーロヘッダーにカルーセルアニメーションを取り入れたテンプレート
1カラム構造でPC・SP間でのレイアウトに差が出にくいデザイン
https://keenthemes.com/preview/megakit/index.html

Megakit_-_HTML5_Theme.jpg

参考

Webデザイン良質見本帳
https://bookwalker.jp/de60b6ccd8-eb4c-4d17-ba3f-41335ef919a2/?adpcnt=7qM_Vsc7&gclid=Cj0KCQiAtOjyBRC0ARIsAIpJyGP39r8xvQkTcyraGiayP3V999cQuveSfg9q6VtyO-h4pi8Yn-DYSHYaAsF3EALw_wcB
Namari_-_Free_Landing_Page_Template.jpg

17
18
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
17
18