Tweet
Tweet

Slide 1

Slide 1 text

ϯ σ β Π ษ ڧ ձ ෋ ͱ ࢁ ΍ · Ҋ ਤ 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

Slide 2

Slide 2 text

動 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

Slide 3

Slide 3 text

デザイン プログラ 写真 画 コーディング 設計 デザイン コーディング プログラム 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

Slide 4

Slide 4 text

ム 多くのことを考えて デザインをしなければ いけないです D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

全ての画面サイズで正しく表 示されるように設計をする必 要があります。 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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

表示スピードの高速化は 快適に閲覧してもらうた めに必須です。 これも 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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

ファーストビュー 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

Slide 22

Slide 22 text

見出しデザイン 共通する部分のクオリティを上げる 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

Slide 23

Slide 23 text

ユーザビリティ・導線 クリックできるボタンにはルールを決める ネガティブなアクションはデザインを変えることも 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

Slide 24

Slide 24 text

インターフェイス ΫΠοΫݕࡧ " # $ % 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

Slide 25

Slide 25 text

バナー 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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

あえてハミ出す 整列している中にあえてハミ出 すことで強調します。 大胆なレイアウトはインパク トの あるデザインを作れます。 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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

強弱を大きくする オーバーサイズの写真を 使うことで、ダイナミッ クでインパクトのある 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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

要素を重ねる 要素を重ねることでデザインに変化を つけることができます。 表示が崩れない ように注意しましょう。 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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

動画 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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

斜めにする 要素に傾きをつけることで目を 引きます。 デザインの幅を広げる ことにもなります。 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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

適度にアニメーションを つけることは、リッチな デザインを作る方法の一 つです。 動きのあるデザイン 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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

ストーリー性のあるデザイン デザインにストーリーを 持たせることによって、 より印象に残りやすいデ ザインになります。 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

Slide 47

Slide 47 text

マテリアルペディア 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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

アクセス解析 アクセスを解析することで、 問題点がわかりデザインを 変更することもあります。 昨年から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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

コンテンツマーケティングは古い？ 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

Slide 53

Slide 53 text

コンテンツブランディング アクセス数を集めるだけ を目的としたとしたコン テンツには意味がない。 ブランディングにつなが るコンテンツを！ 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

Slide 54

Slide 54 text

デザインと コーディング 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

Slide 55

Slide 55 text

ラフやカンプの役割 ラフやカンプの役割は デザインの確認だけで なく、 クライアントの心 に火をつけることです。 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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

デザインコーディング %&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

Slide 58

Slide 58 text

デザインコーディング コーディングしながらデザインも 変化する。 もしくはコーディング しながらデザインも作る。 全体像をイメージすることと、細 部を的確に判断することが重要。 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

Slide 59

Slide 59 text

● 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