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.6k
CLUB p1ass を作った
schktjm
0
210
はじめての npm パッケージ作り
schktjm
0
270
E2E テスト入門
schktjm
0
460
Firebaseでお手軽OGP生成
schktjm
0
580
vuexとvue-routerとあれこれ
schktjm
0
1.4k
秋の大LT2019 in Aizu
schktjm
0
120
Treasure体験記
schktjm
1
480
Other Decks in Design
See All in Design
Les petites aventures de CSS, saison 2025
goetter
3
3.9k
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
320
Tableau曲線表現講座(2024.11.21)
cielo1985
0
250
太田博三(@usagisan2020)
otanet
0
220
Dinosaur Mayhem
storyartist
0
140
Rayout Pattern 01
one0
0
1.5k
藤本佳子・ポートフォリオ・2025/01
yoshi_designer
0
3.3k
20241019-CUD友の会「困った!を解決するデザイン改訂版」交流会
majimasachi
0
320
「Figmaプラグイン開発してみた」@スタメンデザイナーオープン勉強会
kiyoshifuwa
0
120
Illustrator2025がやってきた!私が好きな新機能
hamko1114
0
110
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
510
12年続くB2DサービスとUXデザイン / UX Design keeps B2D service alive over 12 years
tnj
0
280
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Designing for humans not robots
tammielis
250
25k
Adopting Sorbet at Scale
ufuk
74
9.2k
Making Projects Easy
brettharned
116
6k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Code Reviewing Like a Champion
maltzj
521
39k
Producing Creativity
orderedlist
PRO
343
39k
Embracing the Ebb and Flow
colly
84
4.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
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/