⇒ このブログはこんな人が書いてるよ!

WEBデザイナー未経験の僕が作ったポートフォリオサイトを紹介

もう気づけば今年もあっという間に終わってしまいますね。

ポートフォリオサイトとは自分の実務能力をアピールする作品集です。基本的にWEBデザイナーになる為にはポートフォリオサイトが必要になるし、それ前提で面接などもあります。人柄や経歴も大事ですが1番重視しているのはその人の実務としてのレベル、能力です。実際に僕はポートフォリオサイトを持っていかなったらとんでも無い事になりました。

需要があるのか、参考になるのか分かりませんがWEBデザイナー未経験だった僕が作った当時のポートフォリオサイトを紹介します。

 

当時作ったポートフォリオサイトを駄目出ししてみる

ism

僕が初めて作ったポートフォリオサイト、今は削除してしまいTOPのスクリーンショットしか残っていませんでした。それなりのクリエイターっぽい感じのサイトですが今見ると文字や余白のバランス、グラデーションのかかり具合など酷い所がたくさんありますねー(汗

サイト名は「iSM」実はこのブログの初期サイトだったわけで、現在のこのブログ「iSM」は二代目みたいな物です。独学で勉強し果敢にもCSS3を積極的にサイトに織り交ぜていました。

 

 

001

トップの文字部分

 

003

ロゴや文字の位置が揃っていないし、文字だけでも左に揃っていないので違和感だらけ

 

02

フッターのトップページボタンも上と下との余白バランスが崩壊

 

 

架空会社のサイト

次は実際に企業のサイトを作り提出したポートフォリオサイト。

面接を受けた会社が車関係のWEBサイトを扱うところだったので実際に会社が作ったサイトを参考にして架空のサイトを作りました。

kusou

作業時間は記録していませんでしたが全8ページを3日で作成しました

デザインのデの字も習っていなかった僕が他のサイトなどを参考にしながら一生懸命作った事を覚えています。当時は何も思いませんでしたが今見ると素人臭さ全快で恥ずかしい…。

 

05

まずメニュー。ついつい素人がやってしまうグラデーションの強さ。テキストも上より下の方が余白が大きくなってます。シンプルだけど細かい部分が抜けているので素人っぽいメニューになってしまうのでしょうね。

トップ画像ですがフォントはバラバラ、グローとドロップシャドウかけすぎ、文字の配置がおかしい、とツッコミところ満載。フォントも統一感を出した方が綺麗に見えるのにどうしても違うフォントを使ったりしたかったんでしょう。しかも全ても文字が強調性を出しているのでどれを1番に見せたいのか分からず一体何をユーザーに伝えたいのか分からなくなっています。「業界最安挑戦」の絶妙なポジションの悪さ。

 

他のページでも違和感な部分が満載

007

005

丸を入れてみると凄く分かりやすいと思いますが余白バランスがバラバラ、この辺りを綺麗に整えるだけでも見栄えは変わってくるでしょう。

 

まとめ

22h-1024x779

とにかくデザインが全く分からない人は

  • 揃える
  • スペースを取る
  • 色を使いすぎない

デザイン3原則だけでも頭に入れておいて下さい。そしてプロのサイト、自分が良いと思ったサイトを参考にしながら作っていきましょう。それだけでもかなり素人っぽいサイトから脱却できるはず。とにかく経験が大事です。一度作ってみないとそういった部分などにも気づかないし向上はしていかないので。

 

デザインを上げるために必要なことをまとめました

WEBデザイナーを目指している人に見てほしい!僕が教わったデザインの三原則
WEBデザイナー未経験の僕がデザイン力を上げる為にした事

 

WEBデザイナー関連のオススメ記事!

未経験でWEBデザイナーになるにはどうすれば良いのか
失敗しない未経験からWEBデザイナーになる為の教材・本の選び方
WEBデザイナー系の求人サイトをまとめてみた

 

 

 

コメントを残す

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

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)