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
91
富山デザイン勉強会_Webサイトのデザインに必要なこと.pdf
keita
April 26, 2024
Tweet
Share
More Decks by keita
See All by keita
富山デザイン勉強会_デザインで使うChatGPTとFirefly.pdf
keita_yoshikawa
0
37
富山デザイン勉強会_生成AIを使ったデザイン制作.pdf
keita_yoshikawa
0
22
富山デザイン勉強会_デザイナーに学ぶ企画アイデアの考え方.pdf
keita_yoshikawa
2
72
アップロード職業訓練-ChatGPT-FireFly-Canva-WordPress.pdf
keita_yoshikawa
0
41
フィールドスタディ2024砺波高校.pdf
keita_yoshikawa
1
57
アップロード職業訓練-SNS活用.pdf
keita_yoshikawa
2
39
富山デザイン勉強会_デザイナーの打ち合わせ術_打ち合わせをクリエイティブな時間にする方法.pdf
keita_yoshikawa
1
89
富山デザイン勉強会_インフォグラフィックが上手に描けるコツ.pdf
keita_yoshikawa
1
120
富山デザイン勉強会-イントロダクション__5.pdf
keita_yoshikawa
0
49
Other Decks in Design
See All in Design
Ubie Vitalsの取り組み紹介
8845musign
0
640
プロダクトを成長させる生成 AI のユースケース発見ワークショップ vol.3
icoxfog417
1
330
Dreamia
elsh
0
120
WHAT ARE ME?
takuro_nakajima
PRO
0
1.9k
Fooocus(Stable DiffusionXL)で アニメ画像生成の仕方
otanet
0
1.4k
IPの世界観に寄り添う、マルチブランドなカラーシステム設計
jirosh1998
1
10k
Du Bois Challenge 2024 Recap
ajstarks
1
110
デザインプリンシプルのつくりかた(freee技術の日)
magi1125
4
3.5k
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
8
4.5k
JBUG京都#1登壇資料_「考える」をマネジメントする_ビーワークス高濱
webnaut
0
430
最速で価値を届けるUXリサーチ
degudegu2510
5
1.1k
JBUG東京#22登壇資料_日頃クライアントワークを行っているディレクターが自社コーポレートサイトリニューアルを担当して学んだこと
webnaut
0
370
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1029
450k
KATA
mclloyd
27
13k
Robots, Beer and Maslow
schacon
PRO
157
8.1k
Ruby is Unlike a Banana
tanoku
96
10k
GraphQLとの向き合い方2022年版
quramy
43
13k
Fashionably flexible responsive web design (full day workshop)
malarkey
400
65k
Mobile First: as difficult as doing things right
swwweet
220
8.8k
Build The Right Thing And Hit Your Dates
maggiecrowley
29
2.2k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
We Have a Design System, Now What?
morganepeng
48
7.1k
How to name files
jennybc
75
97k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.8k
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