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
590
vuexとvue-routerとあれこれ
schktjm
0
1.4k
秋の大LT2019 in Aizu
schktjm
0
120
Treasure体験記
schktjm
1
490
Other Decks in Design
See All in Design
共通認識のためのユーザビリティテスト by AIエージェント - Accelerating Value Delivery
gakuoya
1
570
Social Anxiety
ksmith2024
0
170
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
1.1k
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
8
76k
線で考える画面構成
natsuume
1
830
ito aya Portfolio
itoaya116
0
140
Crisp Code inc. ブランドガイドライン
so_kotani
1
150
横断組織デザイナーの働き方
mixi_design
PRO
0
430
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
180
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 組織横断のデザインの 取り組みについて
sig
1
310
富山デザイン勉強会_デザイントレンド2025.pdf
keita_yoshikawa
0
230
Tableau曲線表現講座(2024.11.21)
cielo1985
0
340
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
33
6.5k
How to Think Like a Performance Engineer
csswizardry
23
1.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.4k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
9
740
Optimizing for Happiness
mojombo
377
70k
Visualization
eitanlees
146
16k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Building Applications with DynamoDB
mza
94
6.3k
Side Projects
sachag
452
42k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2k
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/