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
410
1
Share
3時間でつくるいいかんじのポートフォリオサイト
#Zli_DeNA_LT
眠い中3時間で作ったのでとても適当です。
https://schktjm.github.io/
よければみてください。
Tajima Sachiko
January 22, 2020
More Decks by Tajima Sachiko
See All by Tajima Sachiko
デザインシステムで アクセシビリティ品質が 担保できなかった 「3つの理由」
schktjm
1
110
エラーとアクセシビリティ
schktjm
2
1.8k
コンポーネントライブラリで実現する、アクセシビリティの正しい実装パターン
schktjm
4
1.5k
ゼロから始めるアクセシビリティ啓蒙活動
schktjm
2
3.1k
CLUB p1ass を作った
schktjm
0
260
はじめての npm パッケージ作り
schktjm
1
320
E2E テスト入門
schktjm
1
500
Firebaseでお手軽OGP生成
schktjm
0
630
vuexとvue-routerとあれこれ
schktjm
0
1.5k
Other Decks in Design
See All in Design
root COMPANY DECK / We are hiring!
root_recruit
3
28k
Mandalyn_DT5001_FinalAssignment.pdf
lynteo
0
230
はじめての演奏会フライヤーデザイン
chorkaichan
1
300
2026年5月24日Redesigner Career Jamご参加者様ご案内資料
base
PRO
0
150
保育現場にAIを 〜人と技術に橋を架けるデザインで考えてきたこと〜 uiuxcamp2026-hoiku-ai-design
hiro93n
1
260
AIスライド生成を進化させるMDファイル
kenichiota0711
0
1.1k
【pmconf2025】PdMの頭の中を見える化する体験構造図
kamechi7222222
1
2.4k
Diverse Design Team Deck
diverse
0
1.9k
デザインの文脈を理解する:エンジニアがデザインカンファレンスに参加して得た学びと気づき
hypebeans
0
200
decksh object reference
ajstarks
2
1.6k
30分でわかるインサイトマネジメント(2025年12月バージョン)
centou
1
650
Accelerating performance improvement based on a software review evaluation matrix
kitanosirokuma
0
240
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
85
9.5k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
ryanjones
0
150
The Mindset for Success: Future Career Progression
greggifford
PRO
0
350
Unsuck your backbone
ammeep
672
58k
Into the Great Unknown - MozCon
thekraken
41
2.5k
The Illustrated Guide to Node.js - THAT Conference 2024
reverentgeek
1
370
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
livdayseo
0
130
The Language of Interfaces
destraynor
162
26k
Build The Right Thing And Hit Your Dates
maggiecrowley
39
3.2k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
helenjbeal
1
210
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
65
55k
Utilizing Notion as your number one productivity tool
mfonobong
4
310
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/