Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
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.7k
ゼロから始めるアクセシビリティ啓蒙活動
schktjm
2
3.3k
CLUB p1ass を作った
schktjm
0
260
はじめての npm パッケージ作り
schktjm
1
330
E2E テスト入門
schktjm
1
520
Firebaseでお手軽OGP生成
schktjm
0
640
vuexとvue-routerとあれこれ
schktjm
0
1.6k
Other Decks in Design
See All in Design
Kouseki | CREATIVE CLASS成果物
yuri9911
0
260
東京都市大学 都市生活学部×一般社団法人オープン企画イベント 「誰もがデザイナーである」とはどういうことか? 【エツィオ・マンズィーニ氏 特別来日・基調講演】
a2k
1
150
技術に明るくない人が技術を選ぶために
moco1013
0
160
インターンから2年新卒フロントエンドエンジニアから見たサイボウズのアクセシビリティ
taku10101
0
190
2026/6/26 第6回韓日リビングラボネットワークフォーラムin世宗 ー未来を作るリビングラボー アジアの社会システム転換に向けたリビングラボの可能性
a2k
2
130
もう迷わない!“なんとなく”を卒業するフォントの選び方【村田俊英】
toshihidemurata
0
1.1k
エンジニア経験0のデザイナーが アプリを0からリリースまで 作ってみる
abokadotyann
2
440
Figmaを使わなくなった私が、最近していること
mela_dayo
0
130
デザインワークフローの最前線。 ログラスでのAI活用の現在地
ukaoli
1
3.5k
Starfall (2025)
rezaline
0
170
いいUIとは?初心者向けに事例をもとにUIデザインを分解
yuichi_hara7
13
7.2k
広い関与の可能性に どう向き合うのか? 私たちは。|Timee MarketingDesign 2026-06-18
bebe
0
1.2k
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
39
3.5k
Marketing Yourself as an Engineer | Alaka | Gurzu
gurzu
0
330
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.9k
Building Adaptive Systems
keathley
44
3.3k
Product Roadmaps are Hard
iamctodd
55
13k
Visual Storytelling: How to be a Superhuman Communicator
reverentgeek
2
720
Reflections from 52 weeks, 52 projects
jeffersonlam
356
22k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
techseoconnect
PRO
0
460
The Illustrated Children's Guide to Kubernetes
chrisshort
51
53k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
aleyda
1
2.2k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
tmiket
1
340
How to Think Like a Performance Engineer
csswizardry
28
2.9k
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/