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
130
エラーとアクセシビリティ
schktjm
2
1.9k
コンポーネントライブラリで実現する、アクセシビリティの正しい実装パターン
schktjm
4
1.6k
ゼロから始めるアクセシビリティ啓蒙活動
schktjm
2
3.2k
CLUB p1ass を作った
schktjm
0
260
はじめての npm パッケージ作り
schktjm
1
320
E2E テスト入門
schktjm
1
510
Firebaseでお手軽OGP生成
schktjm
0
640
vuexとvue-routerとあれこれ
schktjm
0
1.6k
Other Decks in Design
See All in Design
【CEDEC2026】アートとゲームデザインをつなぐVFX設計『GRANBLUE FANTASY: Relink - Endless Ragnarok』における表現と可読性の両立
cygames
PRO
1
1.3k
タイル紹介サイト「タイルだもんで」
calpin
0
180
ClaudeCodeでマーケターの課題を解決する
kenichiota0711
11
14k
(2026 AmA Keynote) Sociotechnical Architecture - Having your Agile and agility too.pdf
xinyao
2
130
Saving_the_King_-_Storyboard.pdf
terencebasart
0
310
工房としてのAI ── デザイナー、作家、ビルダー
hiranotomoki
0
440
再設計される業務 - AIにより再設計される "デザインワークフロー" / AI Ops Lab #2 Redesigned orkflows
kgsi
0
910
AIスライド生成を進化させるMDファイル
kenichiota0711
1
1.7k
なぜ、インサイトを貯めるのか?
tajima_kaho
3
2.7k
Webデザイナー中田美穂_ポートフォリオ
omy
0
110
Decksh keywords
ajstarks
0
120
デザインの文脈を理解する:エンジニアがデザインカンファレンスに参加して得た学びと気づき
hypebeans
0
290
Featured
See All Featured
Leading Effective Engineering Teams in the AI Era
addyosmani
9
2.5k
The Power of CSS Pseudo Elements
geoffreycrofte
82
6.5k
Embracing the Ebb and Flow
colly
88
5.2k
Product Roadmaps are Hard
iamctodd
55
13k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
133
19k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
12
1.3k
Agile Leadership in an Agile Organization
kimpetersen
PRO
0
230
sira's awesome portfolio website redesign presentation
elsirapls
0
410
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
cargoodrich
3
810
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
sarafernandez
2
1.6k
The Impact of AI in SEO - AI Overviews June 2024 Edition
aleyda
6
1.2k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
aleyda
1
1.4k
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/