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
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.3k
ゼロから始めるアクセシビリティ啓蒙活動
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
一次体験を起点にしたUX改善の取り組み / Direct Experience Driven UX Improvements
bitkey
PRO
0
330
【Designship 2025|10.11】デザイン組織と事業貢献、その挑戦と結果。
payatsusan213
1
880
新卒2年目デザイナーが、UX検定基礎にチャレンジした話
designer_no_pon
0
1k
【MIXI MEETUP!ー TECH & DESIGN DAYー】新たなSNS「mixi2」の “0→1”開発の舞台裏:デザイナーが語るプロダクト誕生秘話
mixi_design
PRO
0
180
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
1
450
第4回関東Kaggler会LT HCD-Net人間中心設計スペシャリストが語るNotebookメダルの取り方
utm529f
0
1.8k
kintone Style Book
kintone
5
9.1k
文化のデザイン - Soft Impact of Design
atsushihomma
0
120
root COMPANY DECK / We are hiring!
root_recruit
1
26k
CREATIVE CLASS受講課題|無印良品を題材としたブランド再構築について
happy_ferret153
0
220
AIエージェントが対話的なUIを返す!MCP−UIで変わるユーザ体験
daitasu
1
120
Liquid GlassとApp Intents
touyou
0
650
Featured
See All Featured
SEO in 2025: How to Prepare for the Future of Search
ipullrank
3
3.3k
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
270
Navigating Algorithm Shifts & AI Overviews - #SMXNext
aleyda
0
1.1k
How to Think Like a Performance Engineer
csswizardry
28
2.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
22k
Facilitating Awesome Meetings
lara
57
6.7k
The Invisible Side of Design
smashingmag
302
51k
Code Reviewing Like a Champion
maltzj
527
40k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Lightning talk: Run Django tests with GitHub Actions
sabderemane
0
97
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
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/