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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
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
110
エラーとアクセシビリティ
schktjm
2
1.8k
コンポーネントライブラリで実現する、アクセシビリティの正しい実装パターン
schktjm
4
1.5k
ゼロから始めるアクセシビリティ啓蒙活動
schktjm
2
3.1k
CLUB p1ass を作った
schktjm
0
260
はじめての npm パッケージ作り
schktjm
1
320
E2E テスト入門
schktjm
1
500
Firebaseでお手軽OGP生成
schktjm
0
630
vuexとvue-routerとあれこれ
schktjm
0
1.5k
Other Decks in Design
See All in Design
チームをデザイン対象にする / Design for your team
kaminashi
1
1.4k
「バイブコーディングって何?」から始まった、 AIとの一年間と、その先のこと
seto
0
540
ISO 9241-171:2025っていうのがあってな
shosira
1
130
Diverse Design Team Deck
diverse
0
1.8k
【優秀賞+特別賞】くまモン食いしん坊弁当「くまモンの魔法の柑橘弁当」最終審査資料
shoko_seven11
0
180
AIネイティブスタートアップにおけるプロダクト開発の新常識 / Product Development Tips in AI-Native Startups
saka2jp
2
1.3k
「デザイン」の自分ごと化から始める、デザインピープルのふるまい
mewmo
0
240
なぜ、インサイトを貯めるのか?
tajima_kaho
2
2k
体験負債を資産に変える組織的アプローチ
hikarutakase
0
1.3k
生成AIの不確実性を価値に変える、「ビズリーチ」の体験設計 / KNOTS2026
visional_engineering_and_design
6
1.2k
コムデマネージャーがプロダクトデザインに挑戦した。むずかしくて楽しかった。
payatsusan213
0
300
【pmconf2025】PdMの頭の中を見える化する体験構造図
kamechi7222222
1
2.3k
Featured
See All Featured
Designing Experiences People Love
moore
143
24k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
10
1.2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
GitHub's CSS Performance
jonrohan
1033
470k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
madoxten
62
54k
Are puppies a ranking factor?
jonoalderson
1
3.4k
Measuring Dark Social's Impact On Conversion and Attribution
stephenakadiri
2
200
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.7k
[RailsConf 2023] Rails as a piece of cake
palkan
59
6.6k
The SEO Collaboration Effect
kristinabergwall1
1
460
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
chikuwait
0
540
Art, The Web, and Tiny UX
lynnandtonic
304
21k
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/