Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

tatsumiakahori

September 29, 2020
Tweet

More Decks by tatsumiakahori

Other Decks in Programming

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