富山新聞文化センター説明資料.pdf

Transcript

1. 講 師 ： 吉 川 圭 太 （ D E R A - D E S I G N ）
   富 山 新 聞 文 化 セ ン タ ー 高 岡 ス タ ジ オ
   W e b デ ザ イ ン 講 座
   D E R A - D E S I G N
   W e b D e s i g n c o u r s e
   

   View Slide

2. 講 師 紹 介
   D E R A - D E S I G N
   W e b D e s i g n c o u r s e
   

   View Slide

3. D E R A - D E S I G N
   W e b D e s i g n c o u r s e
   吉川 圭太
   （38才）
   ɾデザイナー
   （デザイナー歴11年）
   ɾWebデザイン/グラフ
   ィ
   ックデザイン
   ɾ愛知県名古屋市 出身
   ɾ砺波市在住
   （2020年6月に移住）
   ɾ妻と長男
   （2才）
   と次男
   （1才）
   4人暮らし
   

   View Slide

4. ● 27才〜ɿDTPデザイナー
   （2年）
   ● 29才〜ɿ看板デザイン
   （1年）
   ● 30才〜ɿWebデザイン グラフィ
   ッ
   クデザイン
   （10年）
   デ ザ イ ナ ー 歴
   約 13 年 デ ザ イ ン に
   携 わ っ て き ま し た
   D E R A - D E S I G N
   W e b D e s i g n c o u r s e
   

   View Slide

5. D E R A - D E S I G N
   W e b D e s i g n c o u r s e
   

   View Slide

6. 15 才 〜 27 才
   総 合 格 闘 技
   D E R A - D E S I G N
   W e b D e s i g n c o u r s e
   

   View Slide

7. 長 男
   （2才）
   次 男（1才）
   D E R A - D E S I G N
   W e b D e s i g n c o u r s e
   

   View Slide

8. こ の 講 座 で
   学 べ る こ と
   D E R A - D E S I G N
   W e b D e s i g n c o u r s e
   

   View Slide

9. D E R A - D E S I G N
   W e b D e s i g n c o u r s e
   W e b 制 作 に
   必 要 な 知 識 と 技 術
   

   View Slide

10. 10
    DERA-DESIGN
    D E R A - D E S I G N
    W e b D e s i g n c o u r s e
    コ ー デ ィ ン グ
    

    View Slide

11. W o r d P r e s s
    ( ワ ー ド プ レ ス )
    D E R A - D E S I G N
    W e b D e s i g n c o u r s e
    

    View Slide

12. D E R A - D E S I G N
    W e b D e s i g n c o u r s e
    デ ザ イ ン
    

    View Slide

13. D E R A - D E S I G N
    W e b D e s i g n c o u r s e
    ア ク セ ス 解 析
    

    View Slide

14. D E R A - D E S I G N
    W e b D e s i g n c o u r s e
    そ の 他 に も
    マ ー ケ テ ィ ン グ や
    仕 事 の 取 り 方 な ど
    

    View Slide

15. DERA-DESIGN
    D E R A - D E S I G N
    W e b D e s i g n c o u r s e
    W e b サ イ ト 制 作 に
    必 要 な も の
    

    View Slide

16. インターネット上に公開している、ブログやコーポレートサイト、
    ショッピングサイトの Web ページの集まりです。
    最近では、小さなお店や会社でも、ホームページを持っておかなきゃい
    けないと言われる時代になりました。
    D E R A - D E S I G N
    W e b D e s i g n c o u r s e
    W e b サ イ ト と は
    

    View Slide

17. DERA-DESIGN
    17
    D E R A - D E S I G N
    W e b D e s i g n c o u r s e
    ホームページのデータを保存し、
    パソコンやスマホなどからリクエ
    ストが来た時にデータを送ります。
    ホームページを作る時には必ずい
    るものです。
    サ ー バ
    

    View Slide

18. D E R A - D E S I G N
    W e b D e s i g n c o u r s e
    ド メ イ ン
    ホームページの住所のようなもの
    です。
    厳密には必須ではありませ
    んが、一般的にホームページを作
    る時にはドメインを用意します。
    

    View Slide

19. D E R A - D E S I G N
    W e b D e s i g n c o u r s e
    デ ー タ ベ ー ス
    サーバとは別に、データを蓄積し
    て必要に応じてを取り出せるよう
    になっています。
    WordPress でホームページを作る
    場合、
    必須になります。
    

    View Slide

20. D E R A - D E S I G N
    W e b D e s i g n c o u r s e
    W e b で 使 う 言 語
    HTML CSS
    PHP JavaScript
    

    View Slide

21. D E R A - D E S I G N
    W e b D e s i g n c o u r s e
    ワ ー ド プ レ ス と は
    

    View Slide

22. DERA-DESIGN
    22
    D E R A - D E S I G N
    W e b D e s i g n c o u r s e
    WordPress とは、コンテンツマネ
    ジメントシステム
    （CMS）
    です。
    専門の言語がわからなくても、簡
    単にホームページが作れて、コン
    テンツ
    （ブログ）
    を管理できるソフ
    トのことです。
    WordPress 日本公式キャラクター
    「わぷー
    （Wapuu）
    」
    

    View Slide

23. の シ ェ ア
    D E R A - D E S I G N
    W e b D e s i g n c o u r s e
    

    View Slide

24. D E R A - D E S I G N
    W e b D e s i g n c o u r s e
    の シ ェ ア
    429 % が W P
    

    View Slide

25. の 特 徴
    D E R A - D E S I G N
    W e b D e s i g n c o u r s e
    ・コンテンツ
    （ブログなど）
    を制作しやすい
    ・たくさんのテーマやプラグインが使える
    ・オープンソースで開発されている
    ・ユーザーが多いため、
    情報が得やすい
    

    View Slide

26. D E R A - D E S I G N
    W e b D e s i g n c o u r s e
    管 理 が し や す い
    HTMLや CSS など、専門的な知識がな
    くてもホームページの更新をするこ
    とができます。
    

    View Slide

27. WordPressはテーマを変えることに
    よって簡単に見た目を変えることが
    できます。
    公式テーマは使用すること
    も改変することも自由です。
    またテー
    マを販売することも自由です。
    D E R A - D E S I G N
    W e b D e s i g n c o u r s e
    テ ー マ
    https:/
    /ja.wordpress.org/themes/
    

    View Slide

28. WordPressはプラグインで機能を拡張
    できます。
    公式プラグインの登録数は
    60、
    104 個
    （2022年9月現在）
    あります。
    問い合わせフォームやライトボックス
    など、
    多くの機能を簡単に実現できます。
    https:/
    /ja.wordpress.org/themes/
    D E R A - D E S I G N
    W e b D e s i g n c o u r s e
    プ ラ グ イ ン
    

    View Slide

29. オープンソースとは
    「制作者が権利を主張しない」
    ソフトウェア開発
    の手法です。
    オープンソースのものは、
    個人
    ɾ
    企業
    （商用）
    を問わず誰で
    も利用
    ɾ
    修正することができます。
    オープンソースを利用し作ったも
    のを、
    再配布してもかまいません。
    権利を主張しないことで、
    様々な
    人々が開発に参加でき、
    よりよいシステムや商品が生まれます。
    https:/
    /ja.wordpress.org/plugins/
    D E R A - D E S I G N
    W e b D e s i g n c o u r s e
    オ ー プ ン ソ ー ス
    

    View Slide

30. PHP
    index.php image.jpg logo.svg
    style.css script.js
    CSS JS
    世界のWordPressコミュニティが
    100%GPLを推奨している
    D E R A - D E S I G N
    W e b D e s i g n c o u r s e
    1 0 0 % G P L
    

    View Slide

31. D E R A - D E S I G N
    W e b D e s i g n c o u r s e
    PHP
    index.php
    100％ではないGPLは
    自由が制限されるので好ましくない
    logo.svg script.js
    JS
    image.jpg
    style.css
    CSS
    スプリットライセンス
    

    View Slide

32. D E R A - D E S I G N
    W e b D e s i g n c o u r s e
    情 報 が 多 い
    使っている人、開発している人が多い
    ので、
    カスタマイズに対応しやすい。
    ま
    た解説も充実している場合が多い。
    反面セキュリティに問題を抱えやす
    い弱点になることもʜʜ
    

    View Slide

33. D E R A - D E S I G N
    W e b D e s i g n c o u r s e
    W e b サ イ ト を
    デ ザ イ ン す る と は
    

    View Slide

34. 動
    D E R A - D E S I G N
    W e b D e s i g n c o u r s e
    W E B サ イト の
    デ ザ イ ン を す る に は
    幅 広 い 技 術 が 必 要
    

    View Slide

35. デザイン
    プログラ
    写真
    画
    コーディング
    設計
    デ ザ イ ン
    コ ー デ ィ ン グ
    プ ロ グ ラ ム
    S E O
    写 真
    イ ラ ス ト
    設 計
    動 画
    D E R A - D E S I G N
    W e b D e s i g n c o u r s e
    

    View Slide

36. 制 作 事 例
    D E R A - D E S I G N
    W e b D e s i g n c o u r s e
    

    View Slide

37. D E R A - D E S I G N
    W e b D e s i g n c o u r s e
    制 作 事 例 ①ɿタ ニ カ 電 器
    https://tanica.jp/
    

    View Slide

38. D E R A - D E S I G N
    W e b D e s i g n c o u r s e
    制 作 事 例 ②ɿ吉 川 養 鶏
    https://yoshikawa-youkei.com/
    

    View Slide

39. S
    D E R A - D E S I G N
    W e b D e s i g n c o u r s e
    https://subaruya.com/amazake/
    制 作 事 例 ③ɿタ ニ カ 電 器（甘 酒）
    

    View Slide

40. SEO イラスト
    D E R A - D E S I G N
    W e b D e s i g n c o u r s e
    制 作 事 例 ④ɿヨ ー グ ル テ ィ ア
    https://tanica.jp/yogurtia-pro/
    

    View Slide

41. D E R A - D E S I G N
    W e b D e s i g n c o u r s e
    https://itakurawood.com/
    制 作 事 例 ⑤ɿ板 蔵
    

    View Slide

42. 制 作 事 例 ⑥ɿ板 蔵 （ L P ）
    https://itakurawood.com/itakura-sp/
    D E R A - D E S I G N
    W e b D e s i g n c o u r s e
    

    View Slide

43. DERA-DESIGN
    42
    制 作 事 例 ⑦ɿ板 蔵 フ ァ ク ト リ ー
    https://itakura-factory.com/
    D E R A - D E S I G N
    W e b D e s i g n c o u r s e
    

    View Slide

44. 制 作 事 例 ⑧ɿ日本心臓血管外科学会
    https://plaza.umin.ac.jp/~jscvs/
    D E R A - D E S I G N
    W e b D e s i g n c o u r s e
    

    View Slide

45. 制 作 事 例 ⑨ɿぎ ふ の 木 ネ ッ ト
    https://gifunoki.net/
    D E R A - D E S I G N
    W e b D e s i g n c o u r s e
    

    View Slide

46. 以 上
    ご 清 聴 あ り が と う
    ご ざ い ま し た
    D E R A - D E S I G N
    W e b D e s i g n c o u r s e
    

    View Slide