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
35
富山デザイン勉強会_Webサイトのデザインに必要なこと.pdf
keita
April 26, 2024
Tweet
Share
More Decks by keita
See All by keita
富山デザイン勉強会-イントロダクション__5.pdf
keita_yoshikawa
0
24
_圧縮_富山デザイン勉強会4-続基礎の基礎.pdf
keita_yoshikawa
0
32
富山デザイン勉強会-デザインの制作フロー.pdf
keita_yoshikawa
0
27
富山デザイン勉強会-イントロダクション__4.pdf
keita_yoshikawa
0
15
富山新聞文化センター説明資料.pdf
keita_yoshikawa
0
11
創業塾2023.pdf
keita_yoshikawa
0
10
富山デザイン勉強会-2024年デザイントレンド.pdf
keita_yoshikawa
1
81
富山デザイン勉強会_文字_タイポグラフィを使ってデザインする方法.pdf
keita_yoshikawa
1
66
デザインの意味_進捗報告.pdf
keita_yoshikawa
0
28
Other Decks in Design
See All in Design
業務システムのUX/UI設計ノウハウを解説。デザイナー不在で失敗しないために身につけるべき基本とは?
ncdc
2
400
顧客体験を作るデザイナーが 意思決定速度を上げるために使うAI
cremacrema
2
620
Ubie Vitalsの取り組み紹介
8845musign
0
280
ユーザーのためなら 『デザイン』 以外にも手を伸ばせる
navitimejapan
PRO
2
840
Tuzukuru解説ブック
atsumaru1377
0
110
モデル・デザイン入門
akitsugu7935
0
490
新しい資産運用サービスALTERNA(オルタナ)の伝え方の工夫
layerx
PRO
0
1.1k
Fooocus(Stable DiffusionXL)で アニメ画像生成の仕方
otanet
0
1.1k
Data+Diversity: Celebrating W.E.B Du Bois through Data Visualization
ajstarks
0
320
企業やプロダクトにおける "らしさ"を分析する | UXリサーチャー/デザイナーはもっとAIを触って欲しいシリーズ
iflection
0
100
マスとAIをなめらかにつなぐデザイン
abcmisuzu
0
250
Sunny Day Storyboard
ctagulao98
0
110
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
Writing Fast Ruby
sferik
622
60k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
14
8.4k
Designing for Performance
lara
601
67k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
20
1.8k
The Pragmatic Product Professional
lauravandoore
26
5.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
81
44k
Agile that works and the tools we love
rasmusluckow
325
20k
Clear Off the Table
cherdarchuk
85
310k
How STYLIGHT went responsive
nonsquared
92
4.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
GraphQLの誤解/rethinking-graphql
sonatard
56
9.3k
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