富山デザイン勉強会_Webサイトのデザインに必要なこと.pdf

Transcript

1. ϯ σ β Π ษ ڧ ձ ෋ ͱ ࢁ ΍ · Ҋ ਤ 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
2. 動 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
3. デザイン プログラ 写真 画 コーディング 設計 デザイン コーディング プログラム 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
4. ム 多くのことを考えて デザインをしなければ いけないです D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
5. 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
6. 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
7. 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
8. 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
9. 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
10. 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
11. 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
12. 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
13. 全ての画面サイズで正しく表 示されるように設計をする必 要があります。 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
14. 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
15. 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
16. 表示スピードの高速化は 快適に閲覧してもらうた めに必須です。 これも 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
17. 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
18. 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
19. 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
20. 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
21. ファーストビュー 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
22. 見出しデザイン 共通する部分のクオリティを上げる 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
23. ユーザビリティ・導線 クリックできるボタンにはルールを決める ネガティブなアクションはデザインを変えることも 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
24. インターフェイス    ΫΠοΫݕࡧ " # $ % 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
25. バナー 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
26. 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
27. あえてハミ出す 整列している中にあえてハミ出 すことで強調します。 大胆なレイアウトはインパク トの あるデザインを作れます。 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
28. 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
29. 強弱を大きくする オーバーサイズの写真を 使うことで、ダイナミッ クでインパクトのある 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
30. 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
31. 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
32. 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
33. 要素を重ねる 要素を重ねることでデザインに変化を つけることができます。 表示が崩れない ように注意しましょう。 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
34. 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
35. 動画 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
36. 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
37. 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
38. 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
39. 斜めにする 要素に傾きをつけることで目を 引きます。 デザインの幅を広げる ことにもなります。 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
40. 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
41. 適度にアニメーションを つけることは、リッチな デザインを作る方法の一 つです。 動きのあるデザイン 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
42. 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
43. 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
44. 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
45. 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
46. ストーリー性のあるデザイン デザインにストーリーを 持たせることによって、 より印象に残りやすいデ ザインになります。 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
47. マテリアルペディア 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
48. 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
49. 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
50. アクセス解析 アクセスを解析することで、 問題点がわかりデザインを 変更することもあります。 昨年から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
51. 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
52. コンテンツマーケティングは古い？ 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
53. コンテンツブランディング アクセス数を集めるだけ を目的としたとしたコン テンツには意味がない。 ブランディングにつなが るコンテンツを！ 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
54. デザインと コーディング 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
55. ラフやカンプの役割 ラフやカンプの役割は デザインの確認だけで なく、 クライアントの心 に火をつけることです。 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
56. 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
57. デザインコーディング %&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
58. デザインコーディング コーディングしながらデザインも 変化する。 もしくはコーディング しながらデザインも作る。 全体像をイメージすることと、細 部を的確に判断することが重要。 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
59. • 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