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
デザインシステムで アクセシビリティ品質が 担保できなかった 「3つの理由」
schktjm
0
82
エラーとアクセシビリティ
schktjm
1
1.7k
コンポーネントライブラリで実現する、アクセシビリティの正しい実装パターン
schktjm
3
1.4k
ゼロから始めるアクセシビリティ啓蒙活動
schktjm
2
3.1k
CLUB p1ass を作った
schktjm
0
250
はじめての npm パッケージ作り
schktjm
0
310
E2E テスト入門
schktjm
0
490
Firebaseでお手軽OGP生成
schktjm
0
630
vuexとvue-routerとあれこれ
schktjm
0
1.5k
Other Decks in Design
See All in Design
結びながら、ひらく - にじむ境界のデザイン
hilokifigma
3
1.5k
デザインを信じていますか
sekiguchiy
1
1k
生成AIの不確実性を価値に変える、「ビズリーチ」の体験設計 / KNOTS2026
visional_engineering_and_design
6
800
「ツール」から「パートナー」へ。AI伴走時代のUXデザインとは?~操作を減らし、成果を最大にするための設計~
ncdc
1
220
モビリティプラットフォームの未来を築くクラウド基盤
kossykinto
0
220
UI/UX & Web Design Portfolio 2025|Madoka Kumagai
madoka_portfolio
2
170
AIエージェントが対話的なUIを返す!MCP−UIで変わるユーザ体験
daitasu
1
160
From the Visible Crossroads: Turning Outputs into Outcomes
takaikanako
2
1.2k
組織の右腕として共創する ー デザインと経営の二つの視点から見えた、新しい支援のかたち/ Designship2025_Nishimura
root_recruit
0
300
hicard_credential_202601
hicard
0
200
セブンデックス プロジェクト事例 / innovation Scenes
sevendex
1
160
Goodpatch Tour💙 / We are hiring!
goodpatch
31
1M
Featured
See All Featured
Joys of Absence: A Defence of Solitary Play
codingconduct
1
300
Principles of Awesome APIs and How to Build Them.
keavy
128
17k
The Illustrated Children's Guide to Kubernetes
chrisshort
51
52k
Raft: Consensus for Rubyists
vanstee
141
7.3k
Information Architects: The Missing Link in Design Systems
soysaucechin
0
810
We Have a Design System, Now What?
morganepeng
55
8k
The B2B funnel & how to create a winning content strategy
katarinadahlin
PRO
1
290
Claude Code のすすめ
schroneko
67
220k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
60
42k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
122
21k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
61k
The Cost Of JavaScript in 2023
addyosmani
55
9.7k
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/