月別アーカイブ: 2014年2月

Webクリエイターのつぶやき(第4回)ポートフォリオ編

FAbank制作者イメージみなさんいかがお過ごしでしょうか。
雪も溶け、寒さのピークは過ぎ、春の兆しが見え始めてきた気がします。
春に向け、環境を変えて心機一転し新しい職場で働きたいと考えている方もいらっしゃるのではないでしょうか。
今回はクリエイターのポートフォリオに注目したいと思います。
クリエイターにとってのポートフォリオとはこれまでの実績としての制作活動や作品をまとめたものです。
就・転職の面接の際に、現場担当者に見せたり、フリーランスや個人事業主の場合は、営業や宣伝に使ったりもします。解りやすく、実績を伝えるために、どのようなポートフォリオを作ればよいのかを、いくつか私がつくったものを例に書いてみたいと思います。

まずは自己紹介から書いてみましょう!

自分は何者なのか、何ができるのかを解りやすく完結に自己紹介します。
あまり長く書いても、担当者に読んでもらえないかもしれないので、短くまとめてみましょう。下記例のように箇条書きでもよいと思います。

・(希望)職種

(例 webデザイナー

・スキル、できること

(例
Photoshop:レタッチ、バナー制作、webサイトのレイアウト
Illustrator:web・紙媒体のレイアウトやデザイン、イラスト制作
HTML+CSS:フルスクラッチコーディング可能、HTML5,CSS3学習中
WordPress:フルカスタマイズ可能
etc

・実務経験年数、できれば会社名

(例
グラフィックデザイナー歴:3年
webデザイナー歴:2年

・学校で学んだこと

(例
webデザイン制作コース:2年 デザインの基礎、コーディングを学ぶ

・制作物に関する成果

(例
集客を目的とした不動産関係のチラシを制作し、チラシに付けたプレゼントのサービス件を
持ったお客様が多数来場し、クライアントから評価をいただいた実績あり

以上、上げてみました。その他、作品が表彰されたり、何かのメディアで取り上げられたその詳細を記載すればよりアピールになります。

作品の画面だけでは伝わらない!

刺さるポートフォリオを作るには、何を載せればよいのか、ポイントでなるであろう項目を洗い出し
幾つか上げてみました。基本的に、実務経験がある方は、時系列で制作した作品を紹介していくかと思います。

  • 大きめの画面キャプチャ
  • 案件概要(例:FAbankのサイトリニューアル、URLも忘れず記載)
  • 自身が担当した部分(例:トップページのデザイン、UI設計やバナー制作)
  • 役割(例:デザイナー)
  • 制作期間(例:2013年4月~7月 約三ヶ月半)
  • 制作時に所属していた会社(書ければ)
  • 使用したソフトウェア(例:Illustrator、Photoshop、Dreamweaver
  • 成果やクライアントからの評価(例:サイトをリニューアルしてからお問い合わせが増えた

etc

などなどを上げてみました。特に案件概要、担当箇所や役割はアピールポイントになるので
しっかり記載しておきたいですね。

公開方法

ポートフォリオ例もっとも一般的なのはポートフォリオサイトとしてweb公開します。ネット環境があれば、無料のレンタルサーバーを使用して、すぐに公開することが可能です。また、PDFやOfficeにまとめたりするのが一般的です。
転職する際、ポートフォリオのURLを貼り付けてたり、添付して求人に応募するとより、アピールになります。担当者がポートフォリオを見て、作品を通じ、スキルやデザインテイストなどを判断し選考しやすくなります。

ポートフォリオ参考サイト

参考にしたい日本人クリエイターのポートフォリオサイト40

クリエイターが自分の作品や活動を公開しているポートフォリオサイト。自由なデザインで作られていて、非常に見せられ、クリエイター魂が燻ります!
http://www.nnmal.com/2012/10/40-japanese-creator-portfolio-sites/

皆さんも刺さるポートフォリオを是非作って見てください。最後まで読んでくれた方、ありがとうございました。

Webクリエイターのつぶやき(第3回)

FAbank制作担当イメージ画像こんにちは。今回はweb、デザイン制作において、役に立つであろうサイトをいくつかご紹介しようと思います。以前はwebデザインの参考となる、まとめサイトのご紹介をしたかと思いますが、今回は、制作やデザインを重点にいくつかご紹介していこうと思います。

 

シルエット素材フリーサイト

http://kage-design.com/

シルエット素材フリーサイトの画面キャプチャシルエット素材を無料でダウンロードでき、商用利用が可能で報告義務もありません。
シルエットを作る手間が省け、サイト内検索をしてみる限り、かなりの種類があると思われるので、目的や用途にあったものを探し、すぐに使えますし、ダウンロードデータはイラストレーター「EPS」のベクター形式なので、自由にリサイズが可能とデザイナーからしたら、かなりありがたいフリーのシルエット素材サイトです。

5秒でCSSを整形するツール「CSS Beautify」

http://web-mimemo.com/web/css_beautify/

5秒でCSSを整形するツール「CSS Beautify」の画面キャプチャみなさんはCSSを手打ちで書いてるのでしょうか?それともDreamweaverのようなオーサリングソフトを使用しているのでしょうか?
今のテキストエディタやオーサリングソフトは機能も充実していて、フリーのものでも使い勝手がよいものもたくさんありますよね。

CSSを書いている内に、改行やインデントができてなかったり、後で見てみたら、自分で見てもわかりにくかったりという経験はありませんか?納期に追われて、スピードコーディングをして、コードがグチャグチャになってた(-o-;)経験は私はありました。

たとえば、自身がコーディングした後に他の人がサイトを修正したり、更新したりと作業発生することがあるのと思うので、コードはやはり、見やすく、解りやすいほうがいいですよね。

そんな時に「CSS Beautify」を使えば、グチャ×2(-o-;)なコードでも、綺麗に整頓してくれます。コーディングしたコードをコピってテキストエリア内に貼り付け、変換するだけで、綺麗にしてくれる便利サイトです。

 

iconfinder(アイコンファインダー)

https://www.iconfinder.com/

iconfinder(アイコンファインダー)の画面キャプチャ海外のアイコン素材サイトです。そもそもアイコンって何に使うの?という人もひょっとしたらいるのかもしれないので、さらっと私なりに書いてみたいと思います。道路でも地下鉄でも、どこのものでもよいので標識を思い浮かべてください。
役割や用途を目印として伝えることを目的に使われます。インターネットを見ているとさまざまなアイコンを見ていると思います。ユーザービリティの向上になりますし、用途を役割を伝えるのはもちろんですが、ビジュアルとして、デザイン要素にもなります。
文字だけでは伝えにくかったりするとき、人の頭に連想しやすいアイコンを考えて使ってみましょう!素材をダウンロードして使うことはもちろんですが、アイコンを探して、アイディアとして自身で作ってもおもしろいと思いますし、制作物全体のテイストやデザインにあった素材制作に役立つのではないでしょうか!

※全てが無料ではなくなってしまったようです。(-_-;)残念。。。

font free(フォントフリー)

http://fontfree.me/page/7/

font free(フォントフリー)の画面キャプチャなんと!日本語フォントをフリーで使える!ありがたすぎる、「神サイト」です。
実際、私もいくつか使わせていただきました!デザイナー日和につきます。
windows、Mac版と分かれています。
漢字に変換したら、フォントがなかったりと「なん・・・・だと」と思ってしまったことがありましたが、フォントを作っている会社もビックリなありがたサイトです。

 

実践SEOマニュアル118個

http://blog.mf-seo.com/archives/10143

実践SEOマニュアル118個の画面キャプチャSEO対策のことが豊富に載っているブログサイトです。
SEOを意識した、Web制作のためになることがたくさん載っています。

 

 

 

さきちんweb

http://sakichin.com/

さきちんwebの画面キャプチャホームページの作り方をかわいいイラストを交えて、丁寧に解説しています。
Web制作初心者の人は参考になるかと思います。