webデザイン 良質デザイン

## グリッドデザイン
### ミーティア
ブログ投稿のグリッドデザインの参考になる
https://meetia.net/
<img width="1435" alt="ミーティア_MEETIA____　Music、CultureのWebマガジン.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411120/e98ae733-4c40-895d-1151-b420361f80a2.jpeg">

### 100TOKYO
同じく、ブログ投稿のグリッドデザインの参考になる
http://100tokyo.jp/
<img width="1424" alt="100_Tokyo_-_Creative_venues__products_and_people_in_Tokyo__Japan_.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411120/d2db62eb-4ab3-e49f-02a9-7645e265284c.jpeg">

### KINFORK
2カラムのグリッドデザイン
左側に大きめの画像、右側に小さめの画像を数点 というデザイン
視線誘導をある程度操作しやすい
https://kinfolk.com/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411120/8ef48276-9eb3-8248-6f4a-db8b3ee5b09e.png)

### チャリツモ
https://charitsumo.com/
ウィンドウの横幅によって表示列数が変動するレスポンシブデザイン
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411120/3bcf7399-98cc-bad3-2f55-736dcf80ebbe.png)


### BENOIT CHALLAND
http://www.benoitchalland.com/projects
画像をホバーすることで、背景色とテキストを表示させるアニメーションが入る
こちらも横幅によって表示列数が変動するレスポンシブデザイン
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411120/02c32d3e-e444-61bc-ccdd-6664807f7185.png)


## パララックス
### muraflex
https://muraflex.com/en
画像とテキストをアトランダムに配置し、テンポのいいデザイン
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411120/6bacbbdd-008d-2b31-75c9-fb02f8015ffc.png)

### melanie
スクロールをすると文字のアニメーションが入る
背景、画像、テキストのスクロールスピードを調整していて、立体感のあるデザイン
http://melanie-f.com/en/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411120/6e626c66-a5b4-4f4e-3d2a-ffd003d0dba3.png)

## イベント系
### 予約ページ
日程入力がカレンダーから選択できる
フォームステップもわかりやすい
https://fb211e.b-merit.jp/0362787492/web/reserve2/?shop_user_id=23400&from_option=1
<img width="600" alt="予約_-_日時・指名選択_-_Hair＆Life_Design_TREE.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411120/307ce4c4-470b-637a-0bc3-2d0fed72c731.jpeg">


### セミナー日程ページ
日付がth、時間をtdに置く
スケジュールが直感的にわかりやすい
https://biennale.tuad.ac.jp/2016/calendar
<img width="600" alt="イベントカレンダー｜みちのおくの芸術祭_山形ビエンナーレ2016.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411120/62917904-b758-aba3-e604-98ff7a82ee64.jpeg">

### プロフィール紹介
直線を多用し、信頼感を演出している
顔写真に微妙なパララックスをつけ、浮遊感も出している
https://daikanyamalaw.com/
<img width="600" alt="代官山綜合法律事務所.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411120/420f0745-bfa0-127f-2dd2-a05e8fd8d5f4.jpeg">

## 特殊系(見ていて面白い)
### 鈴乃屋
縦書きデザイン
和風なコンセプトを伝えたい時に参考になる
ハンバーがメニューのアニメーションが秀逸
https://www.suzunoya.com/kinu/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411120/3fbecfc7-892e-86ef-767f-3534cc8cdc76.png)

### renaterechne
スクロールで画面が回転するデザイン
斬新さを表現したい時に使用できる
http://www.renaterechner.at/en/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411120/53512863-7563-0c09-1457-056dd82c3bc7.png)

### 美容室MILLOR
フェードイン、ホバーのアニメーションが面白い
https://www.millor.jp/
<img width="600" alt="美容室MILLOR（ミラー）___神奈川県武蔵小杉駅のヘアサロン・美容院.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411120/d9fc67ec-932f-7e9c-e54f-a69e83c2ccc3.jpeg">


## レスポンシブデザイン作成における参考技術
### グリッドシステム
https://codeprep.jp/books/55/chapters/6/sections/1

### FlexBoxの使い方
https://webdesign-trends.net/entry/8148

### アニメーションjs
https://qiita.com/baby-degu/items/2516bb55e97de612118b#8-scroll-reveal

---
## HTMLテンプレート
http://photoshopvip.net/111506
より一部引用

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

<img width="1251" alt="Namari_-_Free_Landing_Page_Template.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411120/d80b14b9-e8d7-c047-9978-9793bea5a2da.jpeg">

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

<img width="400" alt="Megakit_-_HTML5_Theme.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411120/73341f32-d0ef-2031-69fb-3e8d57a3c8cb.png">

## 参考
Webデザイン良質見本帳
https://bookwalker.jp/de60b6ccd8-eb4c-4d17-ba3f-41335ef919a2/?adpcnt=7qM_Vsc7&gclid=Cj0KCQiAtOjyBRC0ARIsAIpJyGP39r8xvQkTcyraGiayP3V999cQuveSfg9q6VtyO-h4pi8Yn-DYSHYaAsF3EALw_wcB
<img width="200" alt="Namari_-_Free_Landing_Page_Template.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411120/bbcadec3-b122-641e-aed5-1ea0e29fe5c8.png">