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
エラーとアクセシビリティ
schktjm
1
1.6k
コンポーネントライブラリで実現する、アクセシビリティの正しい実装パターン
schktjm
3
1.3k
ゼロから始めるアクセシビリティ啓蒙活動
schktjm
2
2.9k
CLUB p1ass を作った
schktjm
0
240
はじめての npm パッケージ作り
schktjm
0
300
E2E テスト入門
schktjm
0
480
Firebaseでお手軽OGP生成
schktjm
0
620
vuexとvue-routerとあれこれ
schktjm
0
1.5k
秋の大LT2019 in Aizu
schktjm
0
130
Other Decks in Design
See All in Design
Portfolio 齋藤明敏 Hiroyuki Saito
crearedesign
0
130
DESIGNEAST 2025 A-3
_kotobuki_
0
110
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
hiro93n
0
210
Designing User Experience through Interaction Design
lycorptech_jp
PRO
0
440
越境するデザイン人材:デザイナーが社会資本となる世界へ
goodpatch
1
300
企業にデザインが融けたとき、デザイナーにできること。事業会社12年間の探究と葛藤 / Designship2025
visional_engineering_and_design
0
930
地理院地図をもっと楽しく!れきちず新機能のご紹介
hjmkth
1
210
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
460
ドルちゃん
design_dolphins
0
470
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
1.5k
Memory Man v3 (WIP)
storybychad
PRO
0
2.8k
Installing and Running decksh/pdfdeck
ajstarks
1
880
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Build The Right Thing And Hit Your Dates
maggiecrowley
38
2.9k
The Cult of Friendly URLs
andyhume
79
6.7k
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
Rails Girls Zürich Keynote
gr2m
95
14k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Speed Design
sergeychernyshev
32
1.2k
Testing 201, or: Great Expectations
jmmastey
46
7.8k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6k
BBQ
matthewcrist
89
9.9k
Making Projects Easy
brettharned
120
6.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/