1
0

プロジェクト運営・設計から運用まで学ぶための個人開発に挑戦!~WEBデザイン~

Last updated at Posted at 2024-08-03

はじめに

  この記事は、以下の記事の続編です。まだ読んでいない方は、ぜひ先にこちらの記事をご覧ください。

プロジェクト運営・設計から運用まで学ぶための個人開発に挑戦! ~企画~
プロジェクト運営・設計から運用まで学ぶための個人開発に挑戦!~設計~
プロジェクト運営・設計から運用まで学ぶための個人開発に挑戦!~さくらのレンタルサーバー~

この記事では、前回の内容を引き継ぎ、WEBデザインのまとめを記載します。

WEBデザインについて

参考にした書籍

 本業はサーバーサイドが中心のエンジニアなので、WEBデザインはよくわかりません。ですので、以下の書籍を参考にしております。

いちばんよくわかるWebデザインの基本きちんと入門

 書籍名に入門という文言が記載されているだけあり、WEBデザインについてわかりやすいです。

デザインの素材 

 サイトを遊び心満載かつカッコよくしたいので、フリー素材を探しました。
 商業目的で開発しているわけではないですが、今後の活動のために商業フリー、著作権フリーの素材サイトを探しました。

写真・Ai画像のフリー素材なら「ぱくたそ」オフィシャルサイト

 他には、自分が趣味で風景写真を撮っているので、それを加工しました。

素材加工ツール

 特別なツールは使っておりません。
 私のPCはWindows11で、元々入っていたツールの「ペイント3D」で加工してます。

ペイント3Dの加工技術

  今回は素早くサイトを作りたいため、手の込んだことは実施しておりません。

・クリックボタンを作成するために、素材から形を切り取る方法
・背景を切り抜く方法
・素材に文字を入れるため、見やすくする方法
・文字入れ
・背景透明化

実施方法は、後ほど別個の記事に上げさせていただきます。

サイトの色

 ちょうど紫陽花の時期ということもあり、これから夏に向かうタイミングにぴったりな「青」を中心としたサイトデザインを考えました。私自身も「青」が好きな色でもあり、この色をメインにすることで、個性と季節感を同時に表現できると感じています。

ロゴについて

 WordPressでは、サイトの外観をカスタマイズするためにアイコンを設定する箇所があります。アイコンはサイトの第一印象を左右する重要な要素ですが、過度にこだわりすぎるとセンスの低さが目立ってしまうこともあります。そのため、シンプルなデザインを貫くことが大切です。

 特に、着物に関するサイトですので、日本らしい文字やデザインを取り入れることで、サイト全体の雰囲気を引き立てることができると考えてます。日本の美意識は「侘び寂び」や「簡素美」に重きを置くため、シンプルなアイコンはそのコンセプトと合致すると考えます。

和残新ロゴ.png




WEBデザインを意識した作業は以上です。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
今回はWEBデザインの作業をまとめてみました。
こちらの作業時期は7月の2週間あたりまで。

次回は、WordPressについて記載します。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0