リッチでいい感じなWebサイトをお金も労力もかけずに作る方法

Transcript

1. リッチでいい感じなWebサイトをお金も労力もかけずに作る方法
 Arcana Meet Up #64 赤　堀　竜　海

2. まずは背景から。

3. なぜHPを作るのか？
 ⇨名刺代わり、自己ブランディング 
 　分散している発信チャネル（SNS）の統合 

4. どんなHPを作るのか？
 ⇨ペライチで一目でわかるHP 
 ⇨Lo-Fi、柔らかいイメージ 

5. 機能要件
 ⇨SPファースト（PCは一応見れれば良い） 
 ⇨サーバー費用とかはかけない 

6. https://sayuri-miwa.firebaseapp.com/

7. いい感じのサイトを作るポイントをご紹介

8. ※超主観です

9. • CSS GRADIENT ANIMATOR
 https://www.gradient-animator.com/
 揺らめく背景グラデーション
 Rich point ❶
10. • luxy.js
 https://min30327.github.io/luxy.js/
 慣性スクロール
 Rich point ❷ パララクス
 Rich point ❸
11. • waypoint.js
 http://imakewebthings.com/waypoints/
 フェードアニメーション
 Rich point ❹
12. • 普通にJSで実装。確かどっかに落ちてたやつコピペしていじっただけ。
 オープニングアニメーション
 Rich point ❺
13. デザイン手法
 ⇨デザインカンプは特に作らず、コーディングしながら作っていった。 
 メリット
 • デザイン苦手でも、プログラミング技術を利 用してデザインが組める
 • クライアントとの認識合わせがしやすい
 デメリット
 • スピード感がない
 • デザインとコーディング作業が混同する

14. ⇨ firebaseを利用。無料だがURLに「firebase」と入ってしまうのが難点。 
 ⇨AWS使ってみれば良かったと少し後悔。 
 サーバー

15. まとめ

16. パララクス入れて... 慣性スクロール入れて... オープニングアニメー ション入れて... 程よく動きを付ければ…
17. なんかいい感じのサイトができます。

18. The END