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
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
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
76
エラーとアクセシビリティ
schktjm
1
1.7k
コンポーネントライブラリで実現する、アクセシビリティの正しい実装パターン
schktjm
3
1.4k
ゼロから始めるアクセシビリティ啓蒙活動
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
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
6.9k
ユーザー体験は細部に宿る -ウィジェットQAの挑戦と気づき- / UX is in the details: Challenges and Learnings from Widget QA
bitkey
PRO
0
140
大きな変化の中で、わたしが向き合ったこと #もがく中堅デザイナー
bengo4com
1
1.4k
「デザイン」の自分ごと化から始める、デザインピープルのふるまい
mewmo
PRO
0
150
見過ごさない誠実さ_アクティブバイスタンダーとIntegrityが支えるアジャイル文化 / integrity-and-active-bystander
spring_aki
1
290
「キャリア」のプロダクトをつくる私の「キャリア」への向き合い方 / JAM de NIGHT DESIGN SESSION Vol3
visional_engineering_and_design
1
1k
hicard_credential_202601
hicard
0
140
生成AIの不確実性を価値に変える、「ビズリーチ」の体験設計 / KNOTS2026
visional_engineering_and_design
4
630
自分たちがターゲットになりにくい業務アプリケーションのユーザビリティを担保する取り組み / Initiatives to ensure the usability of business applications that are difficult for us to target
hiromitsuuuuu
1
1.3k
Franks Myth
gfht1
1
400
【MIXI MEETUP!ー TECH & DESIGN DAYー】【工数98%削減】Xでモンストを話題にせよ!生成AIの活用で日本トレンド6位を獲得した企画の設計&デザイン術
mixi_design
PRO
0
190
プロダクトデザイナーに学ぶ、『見る気が起きる』ダッシュボードの作り方 / Creating Engaging Dashboards: Lessons from Product Designers
yamamotoyuta
2
470
Featured
See All Featured
16th Malabo Montpellier Forum Presentation
akademiya2063
PRO
0
46
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
10
1.1k
Odyssey Design
rkendrick25
PRO
1
480
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.4k
Discover your Explorer Soul
emna__ayadi
2
1.1k
Site-Speed That Sticks
csswizardry
13
1.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Impact Scores and Hybrid Strategies: The future of link building
tamaranovitovic
0
200
Tips & Tricks on How to Get Your First Job In Tech
honzajavorek
0
430
Designing for Performance
lara
610
70k
Designing Powerful Visuals for Engaging Learning
tmiket
0
210
Become a Pro
speakerdeck
PRO
31
5.8k
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/