Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
3時間でつくるいいかんじのポートフォリオサイト
Search
Tajima Sachiko
January 22, 2020
Design
1
390
3時間でつくるいいかんじのポートフォリオサイト
#Zli_DeNA_LT
眠い中3時間で作ったのでとても適当です。
https://schktjm.github.io/
よければみてください。
Tajima Sachiko
January 22, 2020
Tweet
Share
More Decks by Tajima Sachiko
See All by Tajima Sachiko
デザインシステムで アクセシビリティ品質が 担保できなかった 「3つの理由」
schktjm
0
66
エラーとアクセシビリティ
schktjm
1
1.6k
コンポーネントライブラリで実現する、アクセシビリティの正しい実装パターン
schktjm
3
1.3k
ゼロから始めるアクセシビリティ啓蒙活動
schktjm
2
3k
CLUB p1ass を作った
schktjm
0
250
はじめての npm パッケージ作り
schktjm
0
300
E2E テスト入門
schktjm
0
490
Firebaseでお手軽OGP生成
schktjm
0
620
vuexとvue-routerとあれこれ
schktjm
0
1.5k
Other Decks in Design
See All in Design
Memory Man v3 (WIP)
storybychad
PRO
0
3k
新卒2年目デザイナーが、UX検定基礎にチャレンジした話
designer_no_pon
0
600
【サイバーエージェント】Creative Switch 会社説明資料
cyberagent_creators
0
1.3k
Correspondence:共に生成していく過程
akiramotomura
0
170
Ralph Penel Portfolio
ralphpenel
PRO
0
160
Spectrum Tokyo_ デザイナーが事業責任者になってみた
shin_2
0
180
Vibe Coding デザインシステム
poteboy
3
1.6k
Findyのプロデチームの 歩みとこれから
satty9556
0
360
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
380
Installing and Running decksh/pdfdeck
ajstarks
1
900
Treasure_Hunting
solmetts
0
120
公開スライド)熊本市様-電子申請中級編
garyuten
0
440
Featured
See All Featured
SEO Brein meetup: CTRL+C is not how to scale international SEO
lindahogenes
0
2.2k
The Pragmatic Product Professional
lauravandoore
37
7.1k
Building Applications with DynamoDB
mza
96
6.8k
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
Context Engineering - Making Every Token Count
addyosmani
9
540
Leading Effective Engineering Teams in the AI Era
addyosmani
9
1.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.2k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
0
3.3k
The innovator’s Mindset - Leading Through an Era of Exponential Change - McGill University 2025
jdejongh
PRO
1
65
The Illustrated Children's Guide to Kubernetes
chrisshort
51
51k
Digital Ethics as a Driver of Design Innovation
axbom
PRO
0
130
Transcript
3時間でつくる いいかんじ(?)の ポートフォリオサイト @schktjm 2020/1/20 Zli x DeNA合同LT会
自己紹介 name : 田嶋幸智子 (schktjm) lab : DB研 like :
フロントエンド・デザイン(自己流 hobby : バイク・日本酒・新しいもの
ごめんなさい
よしポートフォリオサイトつくろう! ←会津に向かう 高速バスでので きごと
1. 書くことをきめる こんなかんじかなー
2. デザインを決める やりたいこと: ネオン風のデザイン
2. デザインを決める やりたいこと: ネオン風のデザイン
None
3. テキトーにデザイン作ってみる 活躍するのは、最近流行りのこいつ!
3. テキトーにデザイン作ってみる drop-shadowの値とテキトーにぐりぐりし てみる 右の例では - fontSizeをBoldに - 黒いdrop-shadowを右下に -
白いdrop-shadowを左上に
3. テキトーにデザイン作ってみる できた
4. 実装していく(HTML) 正直HTMLにCSS当てれば良さそう
4. 実装していく(HTML) できた
5. 実装していく (CSS) - とても小規模なので設計を気にしなくても大 丈夫そう - がんがんいくよ
5. 実装していく(CSS) text-shadow プロパティにinsetができないらしい? この内側に凹んでる表現ができない →
とりあえずできた! https://schktjm.github.io/ (worksに一切リンクを入れてないです><) (Linksがアイコンじゃないのはガイドライン読むのめんど かった><)
感想 - cardはよかったが文字だとなんか浮いて見える - 読みづらい ( 文字が - text-shadowがそんな使えない -
読みづらい ( リンクかボタンかわからん - 解像度の高い画像が悪目立ちしそう - 読みづらい ( 画面を暗くするとわからない - (でも読ますための文字は凸凹させないほうがよさそうです)
まとめ - 個人的には好きだけどアクセシビリ ティ的に見づらいったらありゃしない ので来なさそう - 流石に手をかけてなさすぎなのでも うちょい改善します ♀
みてね https://schktjm.github.io/