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
360
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
2.4k
CLUB p1ass を作った
schktjm
0
210
はじめての npm パッケージ作り
schktjm
0
260
E2E テスト入門
schktjm
0
450
Firebaseでお手軽OGP生成
schktjm
0
560
vuexとvue-routerとあれこれ
schktjm
0
1.3k
秋の大LT2019 in Aizu
schktjm
0
110
Treasure体験記
schktjm
1
470
Other Decks in Design
See All in Design
今日から始める グラレコ チャレンジ DevRel/Tokyo #94 〜グラレコ チャレンジ〜
moshimoshiyuki
0
110
なぜデフォルトが青色!? Tint Colorの理由に迫る
akidon0000
0
460
私の困りごとと解決案 / My issues and proposed solutions
kubosho
1
290
Haruki_Konaka_Portforio.pdf
haruki556
0
650
ビジョン実現を加速させるデザインプログラムマネージャーの視座とキャリア/ Designship2024_Sato
root_recruit
0
170
我做了一個詐騙網站...嗎?
crboy
1
150
超・ファシリテーション 無理ゲー課題を軽やかに超える MIMIGURI流チームデザイン|TOKYO CREATIVE COLLECTION
madue
1
1.2k
Первая беседа о Карте реализации историй
ashapiro
0
290
デザインレビューをできていなかったコムデチームが、 自分たちが続けられるレビューの仕組みをつくった話
tanasho
0
890
デザイナー視点の体験設計とデザインレビューを事業部全員で体験するワークショップをしたお話
masayofff
3
200
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
190
デザインシステム構築の進め方 基本から実践まで、具体的な手順を徹底解説
ncdc
1
210
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Rails Girls Zürich Keynote
gr2m
94
13k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
Gamification - CAS2011
davidbonilla
80
5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Designing for Performance
lara
604
68k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
Navigating Team Friction
lara
183
14k
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/