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
240
TSデザイン改修で得たCSS設計の学び
tatsumiakahori
0
330
clip-path使ってみた
tatsumiakahori
0
260
self introduction 2
tatsumiakahori
0
40
Self introduction-Tatsumi Akahori
tatsumiakahori
0
500
Other Decks in Programming
See All in Programming
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
210
Kotlin Multiplatform at Stable and Beyond (Android Makers 2024)
zsmb
0
330
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.4k
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
980
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
130
Fragment Composition of GraphQL
quramy
7
1.1k
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
110
Random\Randomizer クラスで日常のあれこれを解決しよう! / Random\Randomizer class solves familiar trouble
cocoeyes02
0
250
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
9
4.1k
新宿ダンジョンを可視化してみた
satoshi7190
2
270
Netty Chicago Java User Group 2024-04-17
sullis
0
190
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
Featured
See All Featured
What's new in Ruby 2.0
geeforr
337
31k
Bash Introduction
62gerente
604
210k
The Language of Interfaces
destraynor
151
23k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
Ruby is Unlike a Banana
tanoku
96
10k
How to Ace a Technical Interview
jacobian
272
22k
The Mythical Team-Month
searls
216
42k
Raft: Consensus for Rubyists
vanstee
132
6.3k
Optimizing for Happiness
mojombo
370
69k
KATA
mclloyd
15
12k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
For a Future-Friendly Web
brad_frost
172
9k
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