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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
tatsumiakahori
September 29, 2020
Programming
210
0
Share
リッチでいい感じなWebサイトをお金も労力もかけずに作る方法
tatsumiakahori
September 29, 2020
More Decks by tatsumiakahori
See All by tatsumiakahori
Most Valuable Bug(?) ~インシデント未遂から得た学び~
tatsumiakahori
0
260
TSデザイン改修で得たCSS設計の学び
tatsumiakahori
0
380
clip-path使ってみた
tatsumiakahori
0
280
self introduction 2
tatsumiakahori
0
67
Self introduction-Tatsumi Akahori
tatsumiakahori
0
530
Other Decks in Programming
See All in Programming
今からFlash開発できるわけないじゃん、ムリムリ! (※ムリじゃなかった!?)
arkw
0
190
ハンズオンで学ぶクラウドネイティブ
tatsukiminami
0
120
PHP でエミュレータを自作して Ubuntu を動かそう
m3m0r7
PRO
2
180
Go_College_最終発表資料__外部公開用_.pdf
xe_pc23
0
180
LM Linkで(非力な!)ノートPCでローカルLLM
seosoft
0
460
Java 21/25 Virtual Threads 소개
debop
0
340
CDK Deployのための ”反響定位”
watany
4
700
実践ハーネスエンジニアリング #MOSHTech
kajitack
7
6.3k
存在論的プログラミング: 時間と存在を記述する
koriym
5
860
RSAが破られる前に知っておきたい 耐量子計算機暗号(PQC)入門 / Intro to PQC: Preparing for the Post-RSA Era
mackey0225
3
130
事業会社でのセキュリティ長期インターンについて
masachikaura
0
250
PHPで TLSのプロトコルを実装してみるをもう一度しゃべりたい
higaki_program
0
190
Featured
See All Featured
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
marketingsoph
0
130
Are puppies a ranking factor?
jonoalderson
1
3.3k
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
0
100
Digital Ethics as a Driver of Design Innovation
axbom
PRO
1
260
Ruling the World: When Life Gets Gamed
codingconduct
0
190
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.7k
GraphQLとの向き合い方2022年版
quramy
50
15k
We Are The Robots
honzajavorek
0
210
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
22k
Embracing the Ebb and Flow
colly
88
5k
We Analyzed 250 Million AI Search Results: Here's What I Found
joshbly
1
1.2k
Writing Fast Ruby
sferik
630
63k
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