リッチでいい感じなWebサイトをお金も労力もかけずに作る方法 Arcana Meet Up #64赤 堀 竜 海
View Slide
まずは背景から。
なぜHPを作るのか? ⇨名刺代わり、自己ブランディング 分散している発信チャネル(SNS)の統合
どんなHPを作るのか? ⇨ペライチで一目でわかるHP ⇨Lo-Fi、柔らかいイメージ
機能要件 ⇨SPファースト(PCは一応見れれば良い) ⇨サーバー費用とかはかけない
https://sayuri-miwa.firebaseapp.com/
いい感じのサイトを作るポイントをご紹介
※超主観です
● CSS GRADIENT ANIMATOR https://www.gradient-animator.com/ 揺らめく背景グラデーション Rich point ❶
● luxy.js https://min30327.github.io/luxy.js/ 慣性スクロール Rich point ❷パララクス Rich point ❸
● waypoint.js http://imakewebthings.com/waypoints/ フェードアニメーション Rich point ❹
● 普通にJSで実装。確かどっかに落ちてたやつコピペしていじっただけ。 オープニングアニメーション Rich point ❺
デザイン手法 ⇨デザインカンプは特に作らず、コーディングしながら作っていった。 メリット ● デザイン苦手でも、プログラミング技術を利用してデザインが組める ● クライアントとの認識合わせがしやすい デメリット ● スピード感がない ● デザインとコーディング作業が混同する
⇨ firebaseを利用。無料だがURLに「firebase」と入ってしまうのが難点。 ⇨AWS使ってみれば良かったと少し後悔。 サーバー
まとめ
パララクス入れて... 慣性スクロール入れて...オープニングアニメーション入れて... 程よく動きを付ければ…
なんかいい感じのサイトができます。
The END