このページは一昔前で言う、隠しページです。
このwebサイト制作にあたる経緯や、使用技術などについて、
自分用にまとめたものですが、よろしければご覧下さい。
自分が1年生のときに、昨年の最優秀賞受賞者の香川さんに、「一緒にコンテスト応募しよう！」
と言われ半ばノリだけで応募したのですが、デザインに関する知識も、webに関する知識も
大して持っているわけでもないのに調子に乗ってフリー部門で作品を提出し、
見事に玉砕しました。(笑)
それ以降、よりwebサイトの制作への興味と関心が深まったのと
自身のスキルアップのためこのwebサイトを制作しました。
今回、なぜ架空のデザイン会社のwebサイトを作ったのかというと、
一つは今回コンテストのテーマ部門が「子ども向けサイト」と言うことだったのですが
自分が受講していた「web制作1・演習」と言う授業で子ども向けのサイトを
作るのが最終課題だったのですが、相当苦戦したため、テーマ部門で勝負するのは
厳しいと考え、昨年のテーマ部門の「架空の企業のwebサイト」に近いものを
作ろうと思った事です。
そして二つめは、自分は将来的にweb制作関連の仕事に携わりたいと考えいたのですが、
就職活動のときにポートフォリオを作らなくてはいけないと思い、その練習も兼ねて
作りました。
なので、自分が北海道情報大学に入学してから制作したwebサイトをはじめ、デザインしたもの
などを掲載するページ(Works)を設け、実際に制作してきたものを掲載しています。
ちなみに、サイトの名前ですが、どうしようっかなぁ～、と考えていた時にちょうど
聴いていた曲がPerfumeのDream Fighterと言う曲で、
Dream Fighter→Dream Fight→Dream Futureという、非常に単純な発想で決めました。(笑)
このwebサイトを制作するに当たって使用したソフトや機材などは以下の通りです。
これは本当にたくさん使いました。画像を使うときはたいていフォトショを使います。
web用に画像を出力させることもしてくれるので、高い画質を保ちながら高圧縮してくれるので
非常に重宝しました。
主にワイヤーフレームを制作する段階で使用しました。昨年時に応募した作品の
メニューを使用するときなんかにも使用しました。
使用頻度はそこまで高くないので、あまり使いこなせていませんが、
ワイヤーフレームを組むのにはフォトショップよりも軽くてインターフェイスも
割かしわかり易い方、で使いやすいです。
ここまですべてアドビ製。というわけで次はコーディングソフトです。
やはり非常に使いやすいです。慣れないうちは操作に戸惑いましたが、
今や必須ツールです。といっても、無くてもコーディングできないことは無いですが
やはりあったら安心だし何せラクです。
特にファイルの管理のラクさを一度知ってしまうともうダメですね、
テキストエディタだけで作る気にはならないです。
主にWorksページでの掲載物を制作するときに使用しました。
今回はそこまで複雑なモデリングもしなかったので、ライティング以外はラクでした。
やはり3DCGにすると情報量が一気に増えるのでリアリティが変わりますね。
Worksのページに掲載してあるイラストなどを描くのに使用しました。
自分は絵を大学に入ってから描き始めたのですが、このソフトは初心者でも非常に
描きやすい部類だと思います。綺麗な線画を描くのに非常に優れていると思います。
webブラウザです。自分はChromeを規定のブラウザとして使用しています。
FireFox、Safariなども試しましたが、
軽いし早いしで、インターフェイスも良いのでオススメです。
ペンタブレットです。1年生のときに絵を描くために購入しました。
画像の編集などをするときにも非常に利便性が高く重宝しています。
ココロもカラダもみなぎって翼をあたえてくれるエナジードリンクです。
製作期間中に相当消費しました。自分としては効果がそこそこにあると思うのですが、
如何せんお値段のほうも高くてお財布には優しくないです。(笑)
このwebサイトを作るにあたって、自身のスキルアップも図るために、
最新技術を色々と投入しましたが、なんといっても目玉はHTML5です。
トップページのマウスに追従してくる例のアレはHTML5を使用したものです。
ところで、某リンゴ社がものすごくHTML5をプッシュしていたのが記憶に新しいところですが、
結局のところHTML5ってなんなんだ？という話なのですが、
HTMLの新規格で、従来よりも扱える要素などが増えてよりwebで表現できることの可能性が
広まった！という話なのですが、一般的にHTML5と聞くとFlashみたいな
アニメーションがFlash無しに実現出来ることを想像すると思いますが、
実際のところ、あのアニメーションのほとんどは実はJavaScriptなんです。
トップページで使用しているものは、HTML5の新規格で提唱された「Canvas」と言う要素を
JSで制御してあのように動いています。ちなみに現段階ではIEの方は残念ながらブラウザが
対応していないため見れません。ゴメンナサイね。
IE9を待つか、Chrome,Firefox,Safari等でご覧下さい！
いつからかweb上で目にすることが多くなったlightbox系JSアプリケーションですが、
本サイトでもメニューをクリックした際に使用しています。
今回使用したのは、prettyPhotoという、jQueryを使用したlightbox系JSアプリです。
これの最大の特徴として、画像だけでなくFlash(youtube含む),mp4をはじめとした各種メディア
以外に、HTMLを表示することが出来たので、採用しました。
他にHTML(Div要素)を表示できるものとしてGreyboxなどがあります。
なんといってもそれはHTML5でした。
正直に言うと、自分はJSが致命的にわかりません。
ので、あの背景の設定をするのは非常に手こずりました。
他に自分を苦しめたのはクロスブラウザに対応することでした。
自分はGoogle Chromeを使用していますが、chromeはwebkidを採用しているので、
Chromeで正常に作動するものは大体問題なくsafariでも作動しますし、Firefoxに関しても
さほど問題は無かったので良かったのですが、IEは問題が多すぎました。
反省すべき点は、時間の使い方を上手く使えず、計画通りに動けなかったことです。
期限間近、ギリギリになっての完成だったため、細かいところまでの調整に時間が割けませんでした。
本当であればCMSや、SEO対策にももっと考慮して制作をしたかったのですが。。。
また、制作過程を知人等に見てもらいアドバイスを受けたのですが、デザインに関することで
多く突っ込まれてしまいました。デザインの勉強不足も反省点です。
今回、このサイトを制作してみて思ったことですが、前回よりも自身の技術が向上していることを
実感できました。そういった意味では「自身のスキルアップ」と言う目標が達成されたので
良かったと思います。ですがまだまだ技術的に至らない点ばかりで、やりたいことも
たくさん残っているのでこれからも成長できるよう頑張っていきたいです。
最後までご覧いただき、ありがとうございました。