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
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
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
「使いやすさ」だけでは、「勝てる」サービスにはならない。〜KPIとUXの分断を埋める、サービス戦略という「指針」〜
nbkouhou
2
430
AIスライドデザインを生成する仕組みを社内共有する
kenichiota0711
7
5.6k
Техники структурирования беседы с собой, заказчиком и командо
ashapiro
0
170
ISO 9241-171:2025っていうのがあってな
shosira
1
190
第18回サイゼミ
lw
1
3.9k
速く作れるかではなく、速く学べるか ― 学習ループを回すパイロットの途中報告
nagata03
0
500
20260215独立行政法人科学技術振興機構(JST) 社会技術研究開発センター(RISTEX)ケアが根づく社会システム _公開シンポジウム
a2k
1
210
2026年の勢い / Momentum for 2026
bebe
0
470
社長の宿題への回答 「新卒×AI」が生み出す価値
saki822
2
160
CREATIVE CLASS受講課題|無印良品を題材としたブランド再構築について
happy_ferret153
0
940
はじめての演奏会フライヤーデザイン
chorkaichan
1
310
kintone開発におけるライターの役割の変化〜AI活用を添えて〜 / Changes in the Role of Writers in Kintone Development
keroyama
0
120
Featured
See All Featured
It's Worth the Effort
3n
188
29k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
techseoconnect
PRO
0
200
Tips & Tricks on How to Get Your First Job In Tech
honzajavorek
1
540
Six Lessons from altMBA
skipperchong
29
4.3k
Leading Effective Engineering Teams in the AI Era
addyosmani
9
2.1k
Heart Work Chapter 1 - Part 1
lfama
PRO
7
36k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
tmiket
0
180
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
123
22k
Designing for Timeless Needs
cassininazir
1
260
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
62
44k
Producing Creativity
orderedlist
PRO
348
40k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
287
14k
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/