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
340
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.9k
CLUB p1ass を作った
schktjm
0
190
はじめての npm パッケージ作り
schktjm
0
240
E2E テスト入門
schktjm
0
430
Firebaseでお手軽OGP生成
schktjm
0
530
vuexとvue-routerとあれこれ
schktjm
0
1.2k
秋の大LT2019 in Aizu
schktjm
0
90
Treasure体験記
schktjm
1
420
Other Decks in Design
See All in Design
Desarrollo de Carrera en Diseño y Producto
solmesz1
2
170
素晴らしき余白の世界
kasumidyaya
1
110
データ活用に強い、伴走型デザインパートナー「DeC」紹介資料
hopin
0
190
Web 組版の課題とその解法
yamatoiizuka
0
110
SUKEDACHI DESIGN NIGHT発表スライド
sugiyama_sukedachi
0
240
コラボレーションを小さくはじめ、大きく広める - 相互理解のためのデザイン&開発交流会, Friends of Figma Tokyo by Yasuhiro Yokota
yasuhiroyokota
2
1.2k
成果が出ないユーザーインタビューは何がダメだったのか? ~「誰に聞くか」の探り方 ~
jouykw
10
13k
業務システムのUX/UI設計ノウハウを解説。デザイナー不在で失敗しないために身につけるべき基本とは?
ncdc
2
300
UIをもたらすコンテクストの考察
securecat
9
2.6k
間違った「問い」を乗り越え ノベルティをプチバズりさせた話
takaikanako
0
1.2k
デザイナー向け会社紹介資料/company-profile-designer
nextbeat
1
870
Design Leadership in Challenging Times
morganepeng
3
300
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
6
1.5k
Teambox: Starting and Learning
jrom
128
8.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
17
1.4k
Infographics Made Easy
chrislema
238
18k
10 Git Anti Patterns You Should be Aware of
lemiorhan
648
58k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Navigating Team Friction
lara
178
13k
For a Future-Friendly Web
brad_frost
172
9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
19
1.7k
Automating Front-end Workflow
addyosmani
1356
200k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
The Invisible Side of Design
smashingmag
294
49k
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/