Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
リッチでいい感じなWebサイトをお金も労力もかけずに作る方法
Search
tatsumiakahori
September 29, 2020
Programming
0
200
リッチでいい感じなWebサイトをお金も労力もかけずに作る方法
tatsumiakahori
September 29, 2020
Tweet
Share
More Decks by tatsumiakahori
See All by tatsumiakahori
Most Valuable Bug(?) ~インシデント未遂から得た学び~
tatsumiakahori
0
260
TSデザイン改修で得たCSS設計の学び
tatsumiakahori
0
360
clip-path使ってみた
tatsumiakahori
0
280
self introduction 2
tatsumiakahori
0
62
Self introduction-Tatsumi Akahori
tatsumiakahori
0
520
Other Decks in Programming
See All in Programming
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
240
Is Xcode slowly dying out in 2025?
uetyo
1
210
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
200
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
650
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
540
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
370
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
220
C++20 射影変換
faithandbrave
0
540
ReadMoreTextView
fornewid
1
480
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
160
WindowInsetsだってテストしたい
ryunen344
1
200
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
320
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
700
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Designing Experiences People Love
moore
142
24k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Making Projects Easy
brettharned
116
6.3k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
We Have a Design System, Now What?
morganepeng
53
7.7k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Code Reviewing Like a Champion
maltzj
524
40k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
Transcript
リッチでいい感じなWebサイトをお金も労力もかけずに作る方法 Arcana Meet Up #64 赤 堀 竜 海
まずは背景から。
なぜ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