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
410
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
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
120
エラーとアクセシビリティ
schktjm
2
1.8k
コンポーネントライブラリで実現する、アクセシビリティの正しい実装パターン
schktjm
4
1.5k
ゼロから始めるアクセシビリティ啓蒙活動
schktjm
2
3.2k
CLUB p1ass を作った
schktjm
0
260
はじめての npm パッケージ作り
schktjm
1
320
E2E テスト入門
schktjm
1
500
Firebaseでお手軽OGP生成
schktjm
0
640
vuexとvue-routerとあれこれ
schktjm
0
1.5k
Other Decks in Design
See All in Design
言幹と言葉(Stems & Leaves)
kakukoki
0
160
デザインワークフローの最前線。 ログラスでのAI活用の現在地
ukaoli
1
1.7k
From the Visible Crossroads: Turning Outputs into Outcomes
takaikanako
2
1.5k
凡庸を落とすハーネス
hiromimaeo
1
730
AI-Slopなデザインを生まないためのデザインプロセス戦略
takanorip
7
5k
Basket_of_love.pdf
terencebasart
0
220
大企業インハウスデザイン組織における DesignOps改革の現在地 / DesignOps at Scale: Navigating Transformation in Large Enterprises
nttcom
0
800
CULTURE DECK/Marketing Director
mhand01
0
1.4k
速く作れるかではなく、速く学べるか ― 学習ループを回すパイロットの途中報告
nagata03
0
570
ISO 9241-171:2025っていうのがあってな
shosira
1
220
1000人規模の組織でデザインハーネスを導入するための第一歩
pkshadeck
PRO
4
2.9k
Signull 団体説明資料
signull
0
730
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
225
10k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
6k
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
akashhashmi
0
400
AI in Enterprises - Java and Open Source to the Rescue
ivargrimstad
0
1.4k
How to Talk to Developers About Accessibility
jct
2
460
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
marcoroth
3
380
Collaborative Software Design: How to facilitate domain modelling decisions
baasie
1
270
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
konakalab
0
500
Documentation Writing (for coders)
carmenintech
77
5.4k
Groundhog Day: Seeking Process in Gaming for Health
codingconduct
0
260
Building AI with AI
inesmontani
PRO
1
1.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
62k
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/