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

Transcript

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

   Arcana Meet Up #64
   赤　堀　竜　海

   

   View Slide

2. まずは背景から。

   

   View Slide

3. なぜHPを作るのか？

   ⇨名刺代わり、自己ブランディング 

   　分散している発信チャネル（SNS）の統合 

   

   View Slide

4. どんなHPを作るのか？

   ⇨ペライチで一目でわかるHP 

   ⇨Lo-Fi、柔らかいイメージ 

   

   View Slide

5. 機能要件

   ⇨SPファースト（PCは一応見れれば良い） 

   ⇨サーバー費用とかはかけない 

   

   View Slide

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

   

   View Slide

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

   

   View Slide

8. ※超主観です

   

   View Slide

9. ● CSS GRADIENT ANIMATOR

   https://www.gradient-animator.com/

   揺らめく背景グラデーション

   Rich point ❶
   

   View Slide

10. ● luxy.js

    https://min30327.github.io/luxy.js/

    慣性スクロール

    Rich point ❷
    パララクス

    Rich point ❸
    

    View Slide

11. ● waypoint.js

    http://imakewebthings.com/waypoints/

    フェードアニメーション

    Rich point ❹
    

    View Slide

12. ● 普通にJSで実装。確かどっかに落ちてたやつコピペしていじっただけ。

    オープニングアニメーション

    Rich point ❺
    

    View Slide

13. デザイン手法

    ⇨デザインカンプは特に作らず、コーディングしながら作っていった。 

    メリット

    ● デザイン苦手でも、プログラミング技術を利
    用してデザインが組める

    ● クライアントとの認識合わせがしやすい

    デメリット

    ● スピード感がない

    ● デザインとコーディング作業が混同する

    

    View Slide

14. ⇨ firebaseを利用。無料だがURLに「firebase」と入ってしまうのが難点。 

    ⇨AWS使ってみれば良かったと少し後悔。 

    サーバー

    

    View Slide

15. まとめ

    

    View Slide

16. パララクス入れて... 慣性スクロール入れて...
    オープニングアニメー
    ション入れて... 程よく動きを付ければ…
    

    View Slide

17. なんかいい感じのサイトができます。

    

    View Slide

18. The END
    

    View Slide