Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
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
デザインシステムで アクセシビリティ品質が 担保できなかった 「3つの理由」
schktjm
0
51
エラーとアクセシビリティ
schktjm
1
1.6k
コンポーネントライブラリで実現する、アクセシビリティの正しい実装パターン
schktjm
3
1.3k
ゼロから始めるアクセシビリティ啓蒙活動
schktjm
2
3k
CLUB p1ass を作った
schktjm
0
240
はじめての npm パッケージ作り
schktjm
0
300
E2E テスト入門
schktjm
0
490
Firebaseでお手軽OGP生成
schktjm
0
620
vuexとvue-routerとあれこれ
schktjm
0
1.5k
Other Decks in Design
See All in Design
「自分の仕事はどこまで?」と問い続けたら。デザイナーの「視座」を考える
mukai_takeru
0
250
Franks Myth
gfht1
0
230
デザインシステムの「種」を使って、受託開発を加速させる
akane___ui
0
12k
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
3.1k
The Spectacular Lies of Maps
axbom
PRO
1
360
Character Experience AI 〜 AIキャラクターのつくりかた 〜
smartbank
1
430
mount_company_profile
mount_inc
0
3.5k
地理院地図をもっと楽しく!れきちず新機能のご紹介
hjmkth
1
240
kintone Style Book
kintone
5
6.6k
新卒の目から見たサイボウズのデザイン組織
ryota5884
0
250
maki setoguchi
maki_setoguchi
0
570
CursorでAI活用のナレッジベースを構築する
kanzaki
0
980
Featured
See All Featured
Docker and Python
trallard
46
3.7k
Building an army of robots
kneath
306
46k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.3k
KATA
mclloyd
PRO
32
15k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.8k
Bash Introduction
62gerente
615
210k
How to Think Like a Performance Engineer
csswizardry
28
2.3k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
A Modern Web Designer's Workflow
chriscoyier
697
190k
How to train your dragon (web standard)
notwaldorf
97
6.4k
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/