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
3時間でつくるいいかんじのポートフォリオサイト
Search
Tajima Sachiko
January 22, 2020
Design
400
1
Share
3時間でつくるいいかんじのポートフォリオサイト
#Zli_DeNA_LT
眠い中3時間で作ったのでとても適当です。
https://schktjm.github.io/
よければみてください。
Tajima Sachiko
January 22, 2020
More Decks by Tajima Sachiko
See All by Tajima Sachiko
デザインシステムで アクセシビリティ品質が 担保できなかった 「3つの理由」
schktjm
1
96
エラーとアクセシビリティ
schktjm
2
1.8k
コンポーネントライブラリで実現する、アクセシビリティの正しい実装パターン
schktjm
4
1.4k
ゼロから始めるアクセシビリティ啓蒙活動
schktjm
2
3.1k
CLUB p1ass を作った
schktjm
0
250
はじめての npm パッケージ作り
schktjm
1
310
E2E テスト入門
schktjm
1
500
Firebaseでお手軽OGP生成
schktjm
0
630
vuexとvue-routerとあれこれ
schktjm
0
1.5k
Other Decks in Design
See All in Design
The Art of Caring
klemens
0
270
AI時代、デザイナーの価値はどこに?
tararira
1
1k
Rethinking IFUs: What Board Game Rulebooks Contribute to IFU Usability
deadlinepoet
0
210
Storyboard Exercise: Chase Sequence
lynteo
1
280
改正JISを見据えた、企業のアクセシビリティ対応ロードマップ
securecat
1
330
デザイナーが主導権を握る、AI協業の本音と実践
satosio
7
3.2k
2026年の勢い / Momentum for 2026
bebe
0
410
大企業インハウスデザイン組織における DesignOps改革の現在地 / DesignOps at Scale: Navigating Transformation in Large Enterprises
nttcom
0
510
Mandalyn_DT5001_FinalAssignment.pdf
lynteo
0
210
root COMPANY DECK / We are hiring!
root_recruit
2
27k
Spacemarket Brand Guide
spacemarket
2
470
絵や写真から学ぶ、要素がもたらす副作用
kspace
0
250
Featured
See All Featured
<Decoding/> the Language of Devs - We Love SEO 2024
nikkihalliwell
1
180
Building Flexible Design Systems
yeseniaperezcruz
330
40k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
670
HDC tutorial
michielstock
1
610
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
madoxten
62
53k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
aleyda
2
10k
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
davidcarrasco
3
110
Building a Modern Day E-commerce SEO Strategy
aleyda
45
9k
What Being in a Rock Band Can Teach Us About Real World SEO
427marketing
0
210
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
287
14k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
inesmontani
PRO
3
2.1k
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
480
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/