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
380
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
2
2.7k
CLUB p1ass を作った
schktjm
0
220
はじめての npm パッケージ作り
schktjm
0
280
E2E テスト入門
schktjm
0
470
Firebaseでお手軽OGP生成
schktjm
0
600
vuexとvue-routerとあれこれ
schktjm
0
1.4k
秋の大LT2019 in Aizu
schktjm
0
130
Treasure体験記
schktjm
1
500
Other Decks in Design
See All in Design
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
180
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
0
180
PF_濵村ひろみ_202503
maru_design78
0
140
パンくずリストかわいい(breadcrumb so cute)
ysuda
0
240
マンガで分かるサービスデザインガイドライン
senryakuka
1
800
Illustrator2025がやってきた!私が好きな新機能
hamko1114
0
150
An Early Spring | Storyboard | Scenes 1-18
giofortuna_story
0
180
Kid Cowboy 103
marilutwin
0
180
今更聞けないデザイン思考 - 高専キャリア2024冬 / imasara-design-thinking
chige
7
1k
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
7
5.3k
【pmconf2024】ユーザーになりきる「コスプレUX」で リサーチ解像度を上げる
kamechi7222222
1
9.1k
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 組織横断のデザインの 取り組みについて
sig
1
330
Featured
See All Featured
Code Review Best Practice
trishagee
67
18k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
13
820
BBQ
matthewcrist
88
9.6k
GraphQLの誤解/rethinking-graphql
sonatard
71
10k
Music & Morning Musume
bryan
47
6.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Visualization
eitanlees
146
16k
The World Runs on Bad Software
bkeepers
PRO
68
11k
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/