Webデザインを勉強して…

こんにちは。サツキです。

少し前になりますが、Webデザインを勉強していました。

そこで学んだ知識を元に、今はこのブログの外観を少しずつカスタマイズしております。

とはいえ、わからないことの方が多く、Google先生にたずねながら日々格闘でもあります。

こちらでは、Webデザインを勉強したきっかけ、作成したもの、勉強したその後などについて書いていきたいと思います。

Webデザインとの出会い

趣味で写真を撮っていて、その写真の簡単な補正や年賀状に仕上げるのに、家族のPCに入っているハガキ作成ソフトを使用していました。

「いつかはマイマックでPhotoshopを…」と夢みていたのですが、

データが重いとPC固まる…

Photoshopだったら、こんなことやあんなこともできるのに…

といった状況で長年作業をしていました。

2021年にようやくお迎えする準備が整ったため、わたしのもとにMacBook Airがやってきました。

サクサク動く〜♪

感動ものです。笑

早速、Photoshopを導入してウキウキと勉強や作業をしていました。

しばらくして、

せっかくサブスクで契約しているのだからもっとPhotoshopを利用して何かできないだろうか…

と思うようになり、調査をしていた時に出会ったのがWebデザインです。

広告のバナー、YouTubeのサムネイル、Webサイトなどを作成する際にPhotoshopを使用するらしい。ふむふむ。

ものを作ることが好きなわたしは、「面白そうだ。副業につながるかもしれない…」と、オンライン講座に申し込むことにしました。

オンライン講座で学んだこと

わたしが申し込んだ講座は、1ヶ月+αでWebサイト制作の基礎を学ぶものでした。

内容は

  • 1回目 Photoshopの使用方法を学びながらバナーを作成
  • 2回目〜5回目 Webサイトの仕組み、HTML、CSSを学ぶ
  • ゴール オリジナルのサイトを完成させる

といったもので、次回までに課題の提出もあり毎日せっせと作業です。

5回の授業を1ヶ月間で受講して、その後1ヶ月以内にオリジナルサイトの制作と添削というものでした。


1回目の終了後に作成したバナーがコチラです。

バナー制作

こうしたい!を叶えるためにGoogle先生に頼りながら作成です。


5回目が終了後にオリジナルサイトの制作に取りかかったのですが

  • Photoshopでサイトの見た目をまずデザイン
  • そのデザインを元にHTML、CSSでコーディングをしてWeb上で見られる形に整えていく

こうやってWebサイトはできていたのか…なんて感心している余裕もなく…

やはりGoogle先生と講師の方に頼りながら、なんとかオリジナルサイトのデザインとコーディングが完成。それがコチラ。

「あったらいいなぁ…」というわたしの妄想を詰め込んだ、サメの博物館です。笑

オリジナルサイトデザイン

コチラはデザインだけの画像になりますが、実際はポチッとできて指定した場所へ飛ぶことができます。


他に作成したバナーがコチラ。

セールのバナーデザイン
お中元のバナーデザイン

気になるところはたくさんありますが、わたしの2ヶ月の成果ということで載せてみました…

オンライン講座卒業後

ひととおり講座での勉強を終えて思ったことは

  • Photoshopは機能が盛りだくさんで使いこなすには日々修行あるのみ
  • Webサイトの制作はHTML、CSS以外にも広範囲の知識が必要でアップデートにも対応していかなければならない

Webデザインの勉強は思っていたよりずっとハードなもので、わたしの環境では足りていない分野の勉強を継続していくのは難しいと感じたため、一旦ストップすることに。Photoshop以外はさわらない日々になりました。

そしてしばらく経った今、ふと思いたって始めたブログで役立つことになるとは思いもよらずでした。

ブログを立ち上げたり、外観をカスタマイズするのにWebサイトについての知識があってよかったなと思っています。

基礎的なところは(たぶん…)わかっているので、こんな感じに仕上げたい!を調べながらやっていて、

うまくできた時には、やったーーーーーー!とひとり声を上げて、手も上げて喜んでおります。

その3倍くらいは、なんで変わらへんねーーん!と頭を抱えているので喜びもひとしおなんです。笑

思い描くものをその通りに制作できる技術があると楽しい!と再認識でき、一旦立ち止まったWebサイトに関する勉強ものんびりペースで再開していきたいと思っています。

おわりに

ここまで読んでいただきありがとうございました。

さいごは最近作成したiPhoneのロック画面の画像です。

iPhoneロック画面

Photoshopで作成するのですが、季節や気分によって写真部分を入れ替えて楽しんでおります♪

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA