Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
3時間でつくるいいかんじのポートフォリオサイト
Search
Tajima Sachiko
January 22, 2020
Design
410
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
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
130
エラーとアクセシビリティ
schktjm
2
1.9k
コンポーネントライブラリで実現する、アクセシビリティの正しい実装パターン
schktjm
4
1.7k
ゼロから始めるアクセシビリティ啓蒙活動
schktjm
2
3.3k
CLUB p1ass を作った
schktjm
0
260
はじめての npm パッケージ作り
schktjm
1
330
E2E テスト入門
schktjm
1
520
Firebaseでお手軽OGP生成
schktjm
0
640
vuexとvue-routerとあれこれ
schktjm
0
1.6k
Other Decks in Design
See All in Design
The ISO 25964 standard on Information and documentation — Thesauri and interoperability with other vocabularies
accessinnovations
0
310
IAカンファレンス’26報告会
mayunak
0
110
AI-DLC AI駆動開発ライフサイクルとAI-DLC Worlflows V2のご紹介
fatsushi
2
1.3k
Look Dev Meetup #50
baku89
1
530
ポートフォリオ_あやの
ngyenmazt1412
0
2k
デザイン組織の"次の"強みづくり
isaikaori
2
330
Figmaを使わなくなった私が、最近していること
mela_dayo
0
130
組織で働く大人が「知らないままにやってみる」を取り戻す方法とその意味〜企業で働く実務家による実践知の言語化を事例とした考察〜
chiemitaki
1
510
HeartLanguage - DesignProcess
heartlanguage
0
280
1000人規模の組織でデザインハーネスを導入するための第一歩
pkshadeck
PRO
5
4.4k
Design_Harness_and_Loop.pdf
nagatsu
0
130
【CEDEC2026】アートとゲームデザインをつなぐVFX設計『GRANBLUE FANTASY: Relink - Endless Ragnarok』における表現と可読性の両立
cygames
PRO
2
1.6k
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
28
3.7k
KATA
mclloyd
PRO
35
16k
What does AI have to do with Human Rights?
axbom
PRO
1
2.5k
SEO for Brand Visibility & Recognition
aleyda
0
4.8k
Redefining SEO in the New Era of Traffic Generation
szymonslowik
1
490
エンジニアに許された特別な時間の終わり
watany
109
250k
Git: the NoSQL Database
bkeepers
PRO
433
67k
YesSQL, Process and Tooling at Scale
rocio
174
15k
Ten Tips & Tricks for a 🌱 transition
stuffmc
1
270
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
uxyall
1
3.5k
How to Align SEO within the Product Triangle To Get Buy-In & Support - #RIMC
aleyda
2
1.8k
Building Applications with DynamoDB
mza
96
7.3k
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/