pf_blog

はじめまして！ちゃんふくと申します。インターンシップ研修生として、リアルグローブにお世話になっています！リアルグローブが東京大学の敷地内にあるということで、馬鹿正直に赤門くぐって会社に行こうとしました。しましたよ。 迷いましたよ！

↓噂に聞く赤門

いやー、東京大学って広いですね！頭のGPS機能がポンコツな私には、迷わずに行くなんて、そんなことできるわけがない。 そんなことできるわけがない！ まあ、それを見越してかなり早く家を出たので問題なかったですが。そんな私の道やら人生やらに迷っている話はさておきリアルグローブ社でのインターンシップ研修では ポートフォリオサイトを作ることになりました。なんでそんなことになったのかと申しますと不肖ちゃんふく、恥ずかしながら、デザイナー志望なのですがポートフォリオサイトの一つも持っていなかったのであります。噂のドS上司様に「何がやりたくて何ができるのか示しなさい」と言われても見せるものがないこのツラさ。わかりますか？ わかりますか！？（半泣き）なので、インターンシップ研修の締めくくりであるこの記事では、ちゃんふくが初めて作った恥ずかしい姿満載のポートフォリオサイト と、サイトを作るにあたって大事なこと、役に立つツールを紹介します！ここからはまじめに書いていきますよ！

1．ポートフォリオサイトに大事なこと

ポートフォリオサイトを制作するにあたり、どこに重点を置くべきか…？自身の作品を載せるのはもちろんですが +アルファが無ければ魅力的なサイトにはなりません。どうデザインすれば見やすく、そして見応えのあるサイトになるのか…。自分で考えるだけでは、答えがでなかったりするものです。まず制作に入る前に、人生の先輩たちのサイトを参考にしてみてください！ ↓私が参考にしたまとめサイト http://www.nnmal.com/2012/10/40-japanese-creator-portfolio-sites/ そのなかでもこの2つを参考にしました。

mouf design

WYz-Design

インパクトのあるトップページから作品紹介のページにアクセスすると作品が写真・説明付きで紹介されていて見入ってしまいますね。ちなみにちゃんふくのサイトでは1年前に作ったキャラクターであるヒト型アンドロイド「ｃｆ－０１ｄ」をメインキャラクターとして組み込んでみました。

↓こいつ

このキャラクターは“自分の特徴を踏まえたキャラを作ろう”という大学の課題で誕生したキャラクターなのでここで使わずにいつ使うの？今でしょ！旬が過ぎても使っていくスタイルです。別に泣いてなんかない！！ …自分をキャラクター化してアピールするのも良いかもしれませんね。

2．作り始めよう

自分の頭の中でどんなサイトにするかイメージが固まったら、制作に移ります。サイトを作るには、まず、サイトをインターネット上にアップロードするためのサーバーを借りなければいけません。でも、「サーバーの設定とかわかんない！」「難しそう…」なんて方も中にはいるはず。確かに、考えるだけで頭がこんがらがっちゃいますよね。そんなときは、C4SAがおすすめです！そんなときは、C4SAがおすすめです！（空気を読んだ繰り返し）そんなときは、C4SAがおすすめです！（業務命令による繰り返し）

2-1．C4SAとは？

C4SAとは、リアルグローブ社が開発したニフティ社様提供のPaaSです。 ~~（なんかよくわかりませんが…）~~ このサービスでは、アプリケーション開発をする際に発生するサーバー構築や複雑な設定をショートカットすることができます！ ~~（なんかよくわかりませんが…）~~ サーバーを借りる手間が省けて、なおかつ編集しやすい便利な機能がたくさんありますよ。私もC4SAを使用してポートフォリオサイトを作りました。 ~~（なんかよくわかりませんが…）~~ しかもこのサービスを使えば、サイトだけではなく、アプリケーションなんかも作れちゃいます！夢が広がりますね！

↓サービス紹介ページ

http://c4sa.nifty.com/about.htm

こうやって作ったポートフォリオサイトは、就職活動に良く使われます。面接や人と会ったとき、自身や他人のデバイスから接続して見せながら話をするなんてこともできちゃうわけです。もちろん、名前で検索して見てくれる人もいるでしょう。とすると、様々な種類のデバイスから、サイトにアクセスすることになりますよね。パソコンから見るとちょうど良い大きさになるけどスマートフォンなど画面の小さいデバイスからだと文字・画像が小さく見辛い…。せっかくの作品もそんなことになってしまっては、もったいない、ですよね？デバイスの画面サイズに自動的にサイトの構成を合わせる方法があればこの問題を解決出来ますよね。その解決策となりえるのが、レスポンシブデザインです！（ドヤァッ）

2-2．レスポンシブデザインとは…？

サイトを見る人の持っているデバイスに合わせてレイアウトを自動調整してくれるデザインのことです。様々なデバイスが増えたために、注目されているWEBデザインです。私の制作したサイトも、レスポンシブデザインのテンプレートを利用させていただきました。テンプレートを作って配布している人がたくさんいますので探してみると自分好みのテンプレートが見つかるかもしれませんね！ ↓レスポンシブデザインを取り入れるために参考にしたまとめサイト http://photoshopvip.net/archives/61345

↓ポートフォリオ制作に使用したテンプレート配布サイト Responsive Layout with Navigation Drawer

http://www.roblukedesign.com/trunk/trunk.html

で、このレスポンシブデザインは画面サイズによってレイアウトが変えられますがこれはメディアクエリというコードを書き込むことによって出来ます。

2-3．メディアクエリとは？

このメディアクエリというのは、@から始まるコードのことです。実際に私が書いたコードはこんな感じになっています。

↓私の書いたコード

＠内のコードを編集すれば、画面サイズが○○○pxより小さいときに、「こっちの画像を変更して、文字を見やすい大きさにしよう！」なんてことが可能になります。このコードを使えば、より見やすいサイトに出来ますね！ ↓参考サイト http://coliss.com/articles/build-websites/operation/css/css3-media-queries.html このブログを見たあなたも、自分のサイトを作ってみてはいかがでしょうか？自分を表現する方法なんてたくさんあるのですから、きっと納得のいくものが作れるはずです。ぜひ挑戦してみてください！ ↓ちなみに、私の作ったポートフォリオサイトはこちら！

http://dsx423o-ako-app001.c4sa.net/index.html

そして、私の短いインターンシップ研修は今日で終了しました。ドSな上司様に5日間でサイトを一つ作れと言われた時には「これがブラック会社の洗礼か…」などと思いましたがやってみるとなんとかなるもので、ちょっと大人になったような気がします。社会というジャングルで生きていくには生半可な気持ではいけないということもよくわかりました。ちょっとしたごまかしなんかもすぐばれるし結構大人になっても剥き身で色んなんことに立ち向かわなければいけないということも知りました。明日からはお父さんに対して少し優しくなれそうな気がします。でもそれよりなにより「働くのは楽しい」ということがわかったのがこの１週間で一番の収穫でした。不安もたくさんありますが、ドSな上司様に作らさせていただいたポートフォリオサイトとこの経験を引っ提げて、就職活動に参戦しようと思います！最後ですがインターン研修楽しかったです！私リアルグローブとドS上司様に出会えて本当によかった！

ゴマをスリながら　ちゃんふく