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
390
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
1.5k
コンポーネントライブラリで実現する、アクセシビリティの正しい実装パターン
schktjm
3
1.2k
ゼロから始めるアクセシビリティ啓蒙活動
schktjm
2
2.9k
CLUB p1ass を作った
schktjm
0
240
はじめての npm パッケージ作り
schktjm
0
300
E2E テスト入門
schktjm
0
480
Firebaseでお手軽OGP生成
schktjm
0
620
vuexとvue-routerとあれこれ
schktjm
0
1.5k
秋の大LT2019 in Aizu
schktjm
0
130
Other Decks in Design
See All in Design
越境するデザイン人材:デザイナーが社会資本となる世界へ
goodpatch
0
250
Figmaレクチャー会Part2 もっと使いこなす編@千株式会社 社内勉強会
designer_no_pon
0
100
Marpで推しCSSスライドを作ろう! / marp-with-favorite-css
fujiemon
0
700
高卒公務員から Webデザイナーになるまで
kinomidesign
0
120
【MIXI MEETUP!ー TECH & DESIGN DAYー】【工数98%削減】Xでモンストを話題にせよ!生成AIの活用で日本トレンド6位を獲得した企画の設計&デザイン術
mixi_design
PRO
0
160
見栄えと使いやすさの先にある 特別感 をデザインする / Designing a Sense of Specialness Beyond Aesthetics and Usability
bitkey
PRO
0
120
【MIXI MEETUP!ー TECH & DESIGN DAYー】新たなSNS「mixi2」の “0→1”開発の舞台裏:デザイナーが語るプロダクト誕生秘話
mixi_design
PRO
0
160
デザイナーがAIを使い倒して爆速プロダクト開発!社内ハッカソンでの取り組み紹介
abokadotyann
8
2.6k
OSO2025-マサカリと太陽:伝え方の情報デザイン
majimasachi
0
460
チームで事業価値を生み出す、プロアクティブなデザイナーになるための道のり/ Designship2025_Naya
root_recruit
PRO
0
240
自分たちがターゲットになりにくい業務アプリケーションのユーザビリティを担保する取り組み / Initiatives to ensure the usability of business applications that are difficult for us to target
hiromitsuuuuu
1
840
【Designship 2025|10.11】デザイン組織と事業貢献、その挑戦と結果。
payatsusan213
1
730
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Music & Morning Musume
bryan
46
6.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
A Tale of Four Properties
chriscoyier
161
23k
Bash Introduction
62gerente
615
210k
[RailsConf 2023] Rails as a piece of cake
palkan
57
6k
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/