Photoshopでプロフィールサイト作ってみた
一人分のご飯作るのムズすぎませんか。
こんにちは、こんばんは、おはようございます。
hskrです。
RYuJiさんのnoteで前回の記事をオススメしていただきました。
まさかこういった形で紹介してもらえるとは思わず、通知がきた時はびっくりしました。
RYuJiさん本当にありがとうございました！
ちなみに前回の記事はコチラ↓↓
さて、僕は現在仕事をしながらwebデザインスクールに通っています。
基本的に自宅学習なので、実際スタジオに行くのは月末の課題発表会の時ぐらいなのですが。
その課題の中に、Photoshopでプロフィールサイトを作成するというのがありました。
このnoteでは今回作ったサイトをこちらでも紹介しようということで、まずは見ていただきたいと思います。
コチラです↓↓
いかがでしょうか。
ネット上にあげるということで個人情報にあたる部分は差し替えてあります。
2022年3月6(日)に完成、制作期間は2日間、使用ツールはPhotoshopです。
今回は現在自分が取り組んでいる動画やブログなどの最新情報をまとめたサイトを作りたい、また長年バンドもやっていることからアーティストの公式HPっぽい感じに。
ターゲットは絞らず、不特定多数の方に見ていただき、自分の存在を知ってもらいたいという思いで作りました。
厳密にはこれはデザインカンプと呼ばれるもので、簡単に言うと完成見本のようなものですね。
これを基にHTML/CSSなどのコードを使ってサイトを構築していくわけなんですが。
実際作ってみると本当に細かい作業が多くて、作業の大半が微調整だったんじゃないかと思うくらい。
これからIllustratorやPhotoshopをやっていきたいという方、是非ショートカットキーを覚えておくことをオススメします。
ムチャクチャ使いますし、作業効率には必要不可欠です。
それでは各セクションごとに簡単に解説していきたいと思います。
①HEADER/TOP
ヘッダーには各メニューとSNSアイコンを配置して、見たい情報にいち早くいけるようにしました。
またトップ画像はiPhoneで撮影した動画をスクショしてトリミング、Photoshopで編集しました。
ちょっと影を薄くしてスタジオ撮影したような感じにしています。
ゆくゆくはライブ写真とかも入れてスライドしていくのもいいのかなと。
②NEWS
YouTube・Filmarks・noteの各プラットフォームの更新情報を掲載しています。
こちらは文章に記事のURLを埋め込んですぐにリンク先にいけるようにしていきたいですね。
枠の中だけで情報をスクロールしていくのもアリかも。
③LIVE
アーティストっぽくライブ情報も入れてみました。
フライヤーはPhotoshopの別ウィンドウのアートボードに埋め込んで貼り付けました。
人が写っているので不自然にならないように幅を調整するのが難しかったです。
去年の情報で申し訳ないのですが、諸々の事情でしばらくライブができていません。
どちらかといえばLIVE情報をどんどん更新していきたいのですが。
バンドマンなのでね。
④CONTENTS
各プラットフォームのバナーを貼っています。
メインはYouTubeなのでちょっと大きめに。
バナーを一から作ることも考えましたが、なかなかアイデアが浮かばず。
こちらもHTMLコードを埋め込んでリンク先にいけるようにします。
⑤ACCESS/FOOTER
アクセスの場所をどこにするか悩みましたが結局スクールにしました。
家の住所をのせる訳にはいかないので、まぁ新たな拠点ということで。
個人サイトなのでアクセスはそんなに重要でもないかなと思って枠は小さめ。
フッターにもSNSアイコンをつけています。
以上、簡単に解説していきました。
結構シンプルな作りになったと思います。
必要最低限の情報しか入れていないので、全体的に見やすいのではないかと。
今回作成するにあたって色んなジャンルのアーティストのHPを参考にしました。
バンドマンとしての経験が活きたと思います。
改善点としては、トレーナーさんからテキストサイズのバランスを考慮すべきという指摘をいただいたので、コーディングする時はその部分を意識しないといけないということですね。
あとは要領よく作業できるかどうかかな。
ちなみに余白の部分は長方形ツールを使って幅を決めていきました。
枠と文章の幅も1px単位で調整しています。
この作業がかなり細かい。
ズームイン→調整→ズームアウトして全体を見る→ズームイン→調整
この繰り返し。
レイヤーも整理しておかないと余分に適用範囲がついてしまったりして大変です。
あと意外と手間取ったのが行間。
正直Officeソフトより難しい...笑
Photoshopって本当に細かく設定できるから便利な反面覚えるのに苦労しました。
今はこのデザインカンプにHTML/CSSのコードをあてているんですが、もう途端に難しくなって訳が分からないです。
再現度は半分以下です。
スクールなのでアドバイスをもらうことはできるんですが、僕のようにコードを初めて書きますみたいな人はとにかく復習必須だと思います。
webデザインを学びたいと考えている方、HTML/CSSは鬼門です。
今は目が回るほど忙しいですが、いつかこの経験をnoteに書けたらなと思います。
このnoteを気に入っていただいた方はスキ・コメントよろしくお願いします。
それでは、またお会いしましょう。
この記事が気に入ったらサポートをしてみませんか？