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
0
980
コンポーネントライブラリで実現する、アクセシビリティの正しい実装パターン
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
610
vuexとvue-routerとあれこれ
schktjm
0
1.5k
秋の大LT2019 in Aizu
schktjm
0
130
Other Decks in Design
See All in Design
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
390
ランドマークが光る!季節を彩るナビ体験 - Mobility Night #3 -
kitau
0
110
Them Middle School Kids Pitch
stevie_vee
0
130
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
_psyc0_
0
300
地理院地図をもっと楽しく!れきちず新機能のご紹介
hjmkth
1
130
Designing User Experience through Interaction Design
lycorptech_jp
PRO
0
370
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
330
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
securecat
5
1.7k
CMS管理画面のアクセシビリティ
magi1125
8
2.5k
Memory Man v3 (WIP)
storybychad
PRO
0
2.5k
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
170
新卒の目から見たサイボウズのデザイン組織
ryota5884
0
170
Featured
See All Featured
Making Projects Easy
brettharned
117
6.4k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Music & Morning Musume
bryan
46
6.8k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
GraphQLとの向き合い方2022年版
quramy
49
14k
A designer walks into a library…
pauljervisheath
207
24k
A Tale of Four Properties
chriscoyier
160
23k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
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/