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
370
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.5k
CLUB p1ass を作った
schktjm
0
210
はじめての npm パッケージ作り
schktjm
0
270
E2E テスト入門
schktjm
0
460
Firebaseでお手軽OGP生成
schktjm
0
580
vuexとvue-routerとあれこれ
schktjm
0
1.3k
秋の大LT2019 in Aizu
schktjm
0
110
Treasure体験記
schktjm
1
480
Other Decks in Design
See All in Design
AIネイティブな時代におけるUXデザインの在り方とは
kuni29
0
1.1k
(第1回) アーキテクト・テックリード育成講座
masakaya
0
130
エンタメ業界からDX領域に飛び込んだデザイナーが今立ち向かっている壁とは / applibot-dx-designer
cyberagentdevelopers
PRO
1
160
ビジョン実現を加速させるデザインプログラムマネージャーの視座とキャリア/ Designship2024_Sato
root_recruit
0
230
ユーザーに向き合うデザインが介護・福祉の現場を変える / User-facing design changes the field of care and welfare
sms_tech
0
200
世界中のチームワークをどうデザインしているのか
ka3zu1ma10
0
270
「ちょっといいUI」を目指す努力 / Striving for Little Big Details
usagimaru
6
4k
横断組織デザイナーの働き方
mixi_design
PRO
0
290
プロダクトデザイナー視点から見た チームでの意思決定の難しさと 重要ポイント3点
kei141
0
560
マルチプロダクトにおけるデザイナーの挑戦-デザイン初め新年会2025
u_ri_ta
1
110
開発チームの中心で心理的安全性をつくる、UXデザイナーの問いかけ方
takuto_yonemichi
2
650
LLMによるRAG評価用合成テストデータの生成
licux
5
480
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
67
4.5k
Side Projects
sachag
452
42k
How STYLIGHT went responsive
nonsquared
96
5.3k
Navigating Team Friction
lara
183
15k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
How GitHub (no longer) Works
holman
312
140k
For a Future-Friendly Web
brad_frost
176
9.5k
Designing for humans not robots
tammielis
250
25k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.5k
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/