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
27
富山デザイン勉強会_Webサイトのデザインに必要なこと.pdf
keita
April 26, 2024
Tweet
Share
More Decks by keita
See All by keita
富山デザイン勉強会-イントロダクション__5.pdf
keita_yoshikawa
0
20
_圧縮_富山デザイン勉強会4-続基礎の基礎.pdf
keita_yoshikawa
0
31
富山デザイン勉強会-デザインの制作フロー.pdf
keita_yoshikawa
0
27
富山デザイン勉強会-イントロダクション__4.pdf
keita_yoshikawa
0
15
富山新聞文化センター説明資料.pdf
keita_yoshikawa
0
8
創業塾2023.pdf
keita_yoshikawa
0
10
富山デザイン勉強会-2024年デザイントレンド.pdf
keita_yoshikawa
1
78
富山デザイン勉強会_文字_タイポグラフィを使ってデザインする方法.pdf
keita_yoshikawa
1
66
デザインの意味_進捗報告.pdf
keita_yoshikawa
0
26
Other Decks in Design
See All in Design
丸井グループが取り組むエンタープライズアジャイルと プロダクトマネージャーの役割
muture
0
270
デザイン組織の一人目マネージャーが啜る泥水と美味しいビールに向けてTRYすること
ryoya_frst
0
200
Building a mindful relationship with digital media for zillennials prone to anxiety
mastervicedesign
0
110
PRDがデザインプロセスを高速化した話
tooomo
1
350
B/43プラスカードができるまで
putchomsmartbank
0
490
ウェブディレクターを救うBacklog
wattlaa
0
310
noteのアクセシビリティ これまでのプロダクト・組織へのアプローチとこれからのこと
tatsuyasawanobori
1
1.1k
IPの世界観に寄り添う、マルチブランドなカラーシステム設計
jirosh1998
0
5.7k
UX/UI改善に貢献するユーザーテストとは? 基礎知識から実施のプロセスまで解説
ncdc
0
350
メドレーという会社と デザインチームのひみつ/About Medley design team
medley
0
450
JBUG東京#22登壇資料_日頃クライアントワークを行っているディレクターが自社コーポレートサイトリニューアルを担当して学んだこと
webnaut
0
220
ポートフォリオ思考を通じたデザイナーキャリアの形成と未来への展望
recruitengineers
PRO
3
2.4k
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
22
1.6k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
The Cult of Friendly URLs
andyhume
74
5.7k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.7k
The Power of CSS Pseudo Elements
geoffreycrofte
62
5k
Web Components: a chance to create the future
zenorocha
306
41k
Design by the Numbers
sachag
274
18k
What's new in Ruby 2.0
geeforr
337
31k
Ruby is Unlike a Banana
tanoku
96
10k
Gamification - CAS2011
davidbonilla
77
4.6k
YesSQL, Process and Tooling at Scale
rocio
165
13k
Faster Mobile Websites
deanohume
300
30k
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