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
28
富山デザイン勉強会_デザイントレンド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
140
富山デザイン勉強会_デザイナー経験ゼロからデザイン職に就く方法.pdf
keita_yoshikawa
0
81
富山デザイン勉強会_キャッチコピーの作り方.pdf
keita_yoshikawa
0
41
Other Decks in Design
See All in Design
Fem tips om ux-text • WSA-dagen 29 jan 2025
jonas_blind_hen
PRO
0
130
共創するのはモノではなく価値 ── 日本の「はたらく」を変える挑戦 / Designship2024 MainStage
visional_engineering_and_design
1
720
Dive Deep into Communication
yomtsu
0
210
政策広報実践講座_講演資料ダイジェスト2
capitolthink
0
120
[Designship2024] デザインの力でサービスの価値を追求していたら、組織全体をデザインしていた話
okakasoysauce
2
1.1k
横断組織デザイナーの働き方
mixi_design
PRO
0
330
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.6k
ゲーム開発における、Figma活用事例の紹介 / applibot-figma
cyberagentdevelopers
PRO
2
620
aya_murakami_portfolio
ayakaimi1101
0
1.1k
なぜ今必要?Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
hilokifigma
0
590
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
320
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
0
230
Featured
See All Featured
Optimizing for Happiness
mojombo
376
70k
For a Future-Friendly Web
brad_frost
176
9.5k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
Making Projects Easy
brettharned
116
6k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Embracing the Ebb and Flow
colly
84
4.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Building an army of robots
kneath
302
45k
What's in a price? How to price your products and services
michaelherold
244
12k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Designing for humans not robots
tammielis
250
25k
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