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
富山デザイン勉強会_Webサイトのデザインに必要なこと.pdf
Search
keita
April 26, 2024
Design
1
140
富山デザイン勉強会_Webサイトのデザインに必要なこと.pdf
keita
April 26, 2024
Tweet
Share
More Decks by keita
See All by keita
富山デザイン勉強会_デザイン経営.pdf
keita_yoshikawa
0
0
アップロード-職業訓練_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
34
富山デザイン勉強会_デザイントレンド2025.pdf
keita_yoshikawa
0
150
アップロード職業訓練-デザインで使える写真撮影と画像補正.pdf
keita_yoshikawa
0
45
アップロード職業訓練-誰でも使える写真撮影テクニックのコピー.pdf
keita_yoshikawa
0
21
富山デザイン勉強会_私がデザインのために考えていること.pdf
keita_yoshikawa
0
53
富山デザイン勉強会10-読む人を動かす_効果的な文章の書き方.pdf
keita_yoshikawa
2
82
富山デザイン勉強会_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
150
富山デザイン勉強会_デザイナー経験ゼロからデザイン職に就く方法.pdf
keita_yoshikawa
0
81
Other Decks in Design
See All in Design
世界中のチームワークをどうデザインしているのか
ka3zu1ma10
0
290
Personal Story Sequence - Vendetta(WIP)
elrns88
0
410
【デザイン初め新年会2025|01.08】事業貢献するデザイン組織の挑戦 - 2025年、課題解決をリードする。
payatsusan213
0
9.4k
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
3.1k
入社3ヶ月目のプロダクトデザイナー視点で見たヤプリ / Joining Yappli as a Product Designer: My Perspective After 90 Days
yappli_developers
0
120
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
570
【pmconf2024】ユーザーになりきる「コスプレUX」で リサーチ解像度を上げる
kamechi7222222
1
8.5k
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
160
How to go from research data to insights?
mastervicedesign
0
220
共通言語としてのデザイントークンと Figmaでの運用
kamy0042
0
240
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
6
67k
#yumemi_grow 読書シェア会 vol.1 - スコット・バークン著『デザインはどのように世界をつくるのか』
kaitou
1
100
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
Six Lessons from altMBA
skipperchong
27
3.6k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Why Our Code Smells
bkeepers
PRO
336
57k
Designing Experiences People Love
moore
140
23k
Site-Speed That Sticks
csswizardry
4
380
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Done Done
chrislema
182
16k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Transcript
ϯ σ β Π ษ ڧ ձ ͱ ࢁ
· Ҋ ਤ EFTJHO スピーカーɿ吉川圭太 (DERA-DESIGN) 「Web サイトのデザインに必要なこと」 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
動 Webサイトの デザインをするには 幅広い技術が必要 D E R A - D
E S I G N T o y a m a D e s i g n S t u d y G r o u p
デザイン プログラ 写真 画 コーディング 設計 デザイン コーディング プログラム SEO
写真 イラスト 設計 動画 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
ム 多くのことを考えて デザインをしなければ いけないです D E R A - D
E S I G N T o y a m a D e s i g n S t u d y G r o u p
Webデザインで 考えること CAPTER 01 D E R A - D
E S I G N T o y a m a D e s i g n S t u d y G r o u p
CAPTER 01 Webデザインで考えること 制作フロー アジャイル ウォーターフォール ϦϦʔε ϦϦʔε ϦϦʔε ϦϦʔε
։ൃ ։ൃ ઃܭ ઃܭ ߏங ߏங ઃܭ ઃܭ ߏங ߏங ઃ ܭ ઃ ܭ σ β Π ϯ σ β Π ϯ ϓ ϩ ά ϥ Ϝ ϓ ϩ ά ϥ Ϝ ς ε τ ς ε τ Ϧ Ϧ ồ ε Ϧ Ϧ ồ ε ఆ ٛ ఆ ٛ D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
CAPTER 01 Webデザインで考えること CMS など何で作るか? D E R A -
D E S I G N T o y a m a D e s i g n S t u d y G r o u p
SEO イラスト CAPTER 01 Webデザインで考えること CMSのシェア 現在はWordPressが圧倒 的シェアを持っています。 一方で増加率を見ると Shopifyの伸びが著しい
です。 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
Webサイトのデザインで は画面のサイズが大きく 影響します。 そのため画 面サイズのシェアを知っ ておく必要があります。 CAPTER 01 Webデザインで考えること 画面サイズ
D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
CAPTER 01 Webデザインで考えること 画面サイズのシェア 1920×1080のFullHDが 一番多くなっています。 小さいモニタでは1280 があるのでそこまでは対 応したい。 https://gs.statcounter.com/screen-resolution-stats/
D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
CAPTER 01 Webデザインで考えること カラム D E R A - D
E S I G N T o y a m a D e s i g n S t u d y G r o u p
CAPTER 01 Webデザインで考えること 最近の主流は 1 カラム? 最近のWebサイトのデザ インでは、 1カラムが多い ですが目的によって適当
なものを選びましょう。 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
全ての画面サイズで正しく表 示されるように設計をする必 要があります。 Googleでの検索順位にも影 響をします。 CAPTER 01 Webデザインで考えること レスポンシブデザイン D
E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
CAPTER 01 Webデザインで考えること コーディング (しやすさ) Webサイトのデザインは コーディングされて完成 です。 コーディングが不 可能だったり、難しいも
のでは困ります。 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
Webサイトのデザインで はSEOは切り離せません。 少なからず見た目にも影 響があります。 CAPTER 01 Webデザインで考えること SEO D E
R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
表示スピードの高速化は 快適に閲覧してもらうた めに必須です。 これも Google 検索順位 に影響を及ぼします。 CAPTER 01 Webデザインで考えること
表示スピード D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
CAPTER 01 Webデザインで考えること 機能 Webサイトには様々な機 能があります。 機能の設計や機能にあわ せたデザインを考えなく てはいけません。 D
E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
WEB サイトは作って終わ りではありません。 拡張するができるように 考えておかなければいけ ません。 CAPTER 01 Webデザインで考えること 拡張性
D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
Webサイトを視覚の弱い方が 見る場合もあり、配慮する必 要があります。 2024年 4 月1日から民間も対 応が義務化されました。 CAPTER 01 Webデザインで考えること
アクセシビリティ D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
Webデザインの ポイント CAPTER 02 D E R A - D
E S I G N T o y a m a D e s i g n S t u d y G r o u p
ファーストビュー CAPTER 02 Webデザインのポイント Web サイトを見るときに ユーザーは 3 秒で続きを 見るかどうか判断してい
ます。 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
見出しデザイン 共通する部分のクオリティを上げる CAPTER 02 Webデザインのポイント D E R A -
D E S I G N T o y a m a D e s i g n S t u d y G r o u p
ユーザビリティ・導線 クリックできるボタンにはルールを決める ネガティブなアクションはデザインを変えることも HOME Works Accsess Media Submit Cancel CAPTER
02 Webデザインのポイント D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
インターフェイス ΫΠοΫݕࡧ " # $ % 4VO
.PO 5VF 8FE 5IV 'SJ 4BU CAPTER 02 Webデザインのポイント 使いやすいデザインが必要 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
バナー Webサイトにはよくこの ようなバナーがあります。 素早くきれいに作れると 仕事を効率的に進められ ます。 CAPTER 02 Webデザインのポイント D
E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
Webデザインの テクニックと制作例 CAPTER 03 D E R A - D
E S I G N T o y a m a D e s i g n S t u d y G r o u p
あえてハミ出す 整列している中にあえてハミ出 すことで強調します。 大胆なレイアウトはインパク トの あるデザインを作れます。 CAPTER 03 Webデザインのテクニックと制作例 D
E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
CAPTER 03 Webデザインのテクニックと制作例 E&T ファーム https://etfarm.jp/ D E R A
- D E S I G N T o y a m a D e s i g n S t u d y G r o u p
強弱を大きくする オーバーサイズの写真を 使うことで、ダイナミッ クでインパクトのある Web サイトができます。 CAPTER 03 Webデザインのテクニックと制作例 D
E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
CAPTER 03 Webデザインのテクニックと制作例 板蔵 https://itakurawood.com/itakura-sp/ D E R A -
D E S I G N T o y a m a D e s i g n S t u d y G r o u p
mix-blend-mode と background-blend-mode がある blend-mode CAPTER 03 Webデザインのテクニックと制作例 D E
R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
CAPTER 03 Webデザインのテクニックと制作例 日東 https://kk-nitto.com/ D E R A -
D E S I G N T o y a m a D e s i g n S t u d y G r o u p
要素を重ねる 要素を重ねることでデザインに変化を つけることができます。 表示が崩れない ように注意しましょう。 CAPTER 03 Webデザインのテクニックと制作例 D E
R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
CAPTER 03 Webデザインのテクニックと制作例 ワイケーコウキ https://www.yk-kouki.jp/ D E R A -
D E S I G N T o y a m a D e s i g n S t u d y G r o u p
動画 Webサイトで動画を使う のは最近の流行です。 表示が遅くなることには 注意をしましょう。 CAPTER 03 Webデザインのテクニックと制作例 D E
R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
CAPTER 03 Webデザインのテクニックと制作例 板倉ファクトリー https://itakura-factory.com/ D E R A -
D E S I G N T o y a m a D e s i g n S t u d y G r o u p
CAPTER 03 Webデザインのテクニックと制作例 加藤製作所 https://ksj-group.com/ D E R A -
D E S I G N T o y a m a D e s i g n S t u d y G r o u p
CAPTER 03 Webデザインのテクニックと制作例 TalkONE https://talkone.co.jp/ D E R A -
D E S I G N T o y a m a D e s i g n S t u d y G r o u p
斜めにする 要素に傾きをつけることで目を 引きます。 デザインの幅を広げる ことにもなります。 CAPTER 03 Webデザインのテクニックと制作例 D E
R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
CAPTER 03 Webデザインのテクニックと制作例 スポポ https://supopo.jp/ D E R A -
D E S I G N T o y a m a D e s i g n S t u d y G r o u p
適度にアニメーションを つけることは、リッチな デザインを作る方法の一 つです。 動きのあるデザイン CAPTER 03 Webデザインのテクニックと制作例 D E
R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
CAPTER 03 Webデザインのテクニックと制作例 庄川土石 https://shogawa.co.jp/ D E R A -
D E S I G N T o y a m a D e s i g n S t u d y G r o u p
CAPTER 03 Webデザインのテクニックと制作例 日本プロ麻雀協会 https://npm2001.com/ D E R A -
D E S I G N T o y a m a D e s i g n S t u d y G r o u p
CAPTER 03 Webデザインのテクニックと制作例 DERA-DESIGN https://deradesign.jp/ D E R A -
D E S I G N T o y a m a D e s i g n S t u d y G r o u p
CAPTER 03 Webデザインのテクニックと制作例 富山デザイン勉強会 https://toyama-design.com/ D E R A -
D E S I G N T o y a m a D e s i g n S t u d y G r o u p
ストーリー性のあるデザイン デザインにストーリーを 持たせることによって、 より印象に残りやすいデ ザインになります。 CAPTER 03 Webデザインのテクニックと制作例 D E
R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
マテリアルペディア https://materialpedia.net/solution CAPTER 03 Webデザインのテクニックと制作例 D E R A -
D E S I G N T o y a m a D e s i g n S t u d y G r o u p
Webサイトは 育てていくもの CAPTER 04 D E R A - D
E S I G N T o y a m a D e s i g n S t u d y G r o u p
PDCA 「 Plan=計画 」 「Do=実 行」 「Check=評価」 「Action=改善」 デザインも改善していく必要 があります。
CAPTER 04 Webサイトは育てていくもの D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
アクセス解析 アクセスを解析することで、 問題点がわかりデザインを 変更することもあります。 昨年からGA4へと大きな変 化がありました。 CAPTER 04 Webサイトは育てていくもの D
E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
CAPTER 04 Webサイトは育てていくもの コンテンツ増やす (ブロ グを書いて)アクセスを あつめます。 更新しやす いようにデザインを準備 しておきます。
コンテンツマーケティング D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
コンテンツマーケティングは古い? SNS など情報発信の中 心になり、 Web サイトで 一生懸命ブログを書くこ とはどうなのか? CAPTER 04
Webサイトは育てていくもの D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
コンテンツブランディング アクセス数を集めるだけ を目的としたとしたコン テンツには意味がない。 ブランディングにつなが るコンテンツを! CAPTER 04 Webサイトは育てていくもの D
E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
デザインと コーディング CAPTER 03 D E R A - D
E S I G N T o y a m a D e s i g n S t u d y G r o u p
ラフやカンプの役割 ラフやカンプの役割は デザインの確認だけで なく、 クライアントの心 に火をつけることです。 CAPTER 04 デザインとコーディング D
E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
CAPTER 04 デザインとコーディング コーディングの指示 デザインとコーディ ングを 分業する場合、思ったと おりに仕上がらないこと があります。 D
E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
デザインコーディング %&4*(/ $0%*/( CAPTER 04 デザインとコーディング D E R A
- D E S I G N T o y a m a D e s i g n S t u d y G r o u p
デザインコーディング コーディングしながらデザインも 変化する。 もしくはコーディング しながらデザインも作る。 全体像をイメージすることと、細 部を的確に判断することが重要。 CAPTER 04 デザインとコーディング
D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
• Webサイトのデザイン技術は複合的 • 考えることがたくさんあって大変 • Webサイトは作って終わりではない • デザインとコーディングの関係は? まとめ D
E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p