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
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
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
〜バイブコーディングを超えて〜 チームで実験し続けたAI駆動開発
tigertora7571
0
190
Lightning-Fast Method Calls with Ruby 4.1 ZJIT / RubyKaigi 2026
k0kubun
3
2.6k
【26新卒研修資料】TDD実装演習
dip_tech
PRO
0
170
AI-DLC Deep Dive
yuukiyo
9
5.6k
HTML-Aware ERB: The Path to Reactive Rendering @ RubyKaigi 2026, Hakodate, Japan
marcoroth
0
640
Agent Skills を社内で育てる仕組み作り
jackchuka
1
1.4k
Symfony AI in Action - SymfonyLive Berlin 2026
chr_hertel
1
120
書き換えて学ぶTemporal #fukts
pirosikick
2
350
ソフトウェア設計の結合バランス #phperkaigi
kajitack
0
490
How We Benchmarked Quarkus: Patterns and anti-patterns
hollycummins
1
180
Surviving Black Friday: 329 billion requests with Falcon!
ioquatix
0
2.8k
ハーネスエンジニアリングにどう向き合うか 〜ルールファイルを超えて開発プロセスを設計する〜 / How to approach harness engineering
rkaga
28
19k
Featured
See All Featured
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
kimpetersen
PRO
0
320
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
davidcarrasco
0
130
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
62k
Visual Storytelling: How to be a Superhuman Communicator
reverentgeek
2
530
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
690
Documentation Writing (for coders)
carmenintech
77
5.3k
WCS-LA-2024
lcolladotor
0
570
Agile that works and the tools we love
rasmusluckow
331
21k
Abbi's Birthday
coloredviolet
2
7.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
10k
Building AI with AI
inesmontani
PRO
1
970
Navigating Weather and Climate Data
rabernat
0
180
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