WEBデザイン編-が知りたい人はじめてWEBデザインをやった感想や指摘されたことが知りたい人WEBデザインの各パーツやデモサイトを制作した感想や指摘されたことをまとめました。わたしの黒歴史のデザインである意味、貴重なブログになっています。自由レイアウトワイヤフレームレイアウト(修正後)まとめ各パーツを作る課題Photoshopの基本的な使い方を学んだ後はWEBサイトの各パーツを作る課題を行いました。各パーツは書き出しまでやって提出します。保存方法で「PNG」「JPEG」「GIF」を選択するのですが、どれを選んでいいのか分からず先生に何回も聞きました。MEMOスライスとはWEBサイトで使用する画像を複数に分割する機能。今はアセットでやっている人が多いですバナーまずはバナーです。先生からのアドバイスもっと立体的に加工して立体的にしてみました。バナーはクリックしてもらえるようなデザインが理想ですが、全然できていませんね(笑)すぐにOKは出たものの、自分から見ても微妙です。ボタン次はボタンです。先生からのアドバイスデザインが古い実際のボタンのサイズで作るかなり大きめに作ってしまったのですが、実際のボタンのサイズで作るようにと。検証ツールで大きさを確認し、作りなおしました。最後にメニューバーです。先生からのアドバイスデザインが古い最新のデザインを見るようにチロルチョコを連想させるデザイン(笑)今はシンプルでフラットなデザインが流行っているよと教えて頂きました。温泉施設デモサイト課題WEBデザインの課題は温泉施設のデモサイト2ページでした。自由にレイアウトしてしまったのですが、先生からはワイヤーフレーム通りに作るように指摘され、作りなおしに。自由レイアウトとワイヤーフレームレイアウトを両方紹介します。※テキストと画像素材は変更済みです自由レイアウトまずは自由レイアウトの紹介です。先生からのアドバイスワイヤーフレーム通り作ること1pxもずれないようにバナーが合ってないトップページと下層ページのデザインに統一感を出す「実際のお仕事でワイヤーフレーム通りに作らないのはNGだよ」と指摘されました。MEMOワイヤーフレームとはモノクロの構成図のことです「1pxもずれないように」と指摘され、細かいなと思いましたが、コーディングするときの目安になります。WEBデザインのお仕事は分業制のことが多い。コーディングをする方が作業しやすいデザインにすることは大切だと思いました。トップページと下層ページのデザインの統一については修正後のものなのでわかりづらいかもしれません。デザインに統一感がないと、ホームページを見た方が「違うサイト?」と感じ、サイト離れにつながります。ワイヤフレームレイアウト(修正後)こちらは特に指摘なし。今、見ると直したい所はあるけれど、成長してる!!と思いました。まとめいかがでしたか?今回は黒歴史のデザインを掲載しているので、公開するのに緊張しました。こんなデザインを作ってたんだと懐かしい気持ちと成長してると実感できたのはよかったです。過去の作品を振り返るのもいいですね。-この記事を書いた人マッシュフリーランスデザイナーアラサー女の子ママ。家庭と仕事を両立させるためにWEBデザインを学び、未経験でフリーランスデビュー。MushDesign(マッシュデザイン)の屋号でWEB制作、イラスト制作、SNSデザイン制作をしています。コメントをキャンセルメールアドレスが公開されることはありません。プロフィールアラサー主婦。家庭と仕事を両立させるためにWEBデザインを学び、未経験でフリーランスデビュー。MushDesign(マッシュデザイン)の屋号でWEB制作、デザイン制作、イラスト制作をしています。休業を決意したフリーランスママ。保育園に入れたかった4つの理由と心境の変化、そして今後の決意を書きました。