Portfolio of BowWorks.

このページについて

このページは福田へたれのポートフォリオです。
Web制作実務歴8ヶ月という若輩が作ったもので、大した実績があるわけでもすごい技術があるわけでもありませんが、自分が作ったものを公開したいと思います。参考までに御覧下さい。

Web制作の仕事につくまでの経緯

それまでは風俗雑誌の編集者やDTPオペレーター、パッケージの企画デザインなど、主に紙に関わる業務に携わることが多かった僕が、Webへ眼を向け始めたのは、2003年のことでした。 MovableTypeを知り、Blogに夢中になり、いつしか「Webを仕事にするにはどうしたらいいんだろう？」と思い始めるようになりました。
それからかなり時間が経ち、ようやく2009年に他業務と兼任でWeb制作という仕事につくことが出来ました。

某社Web制作担当者時代

2009年の1月後半にこの会社に入社していくつかのWebサイトを制作しました。
Web制作未経験という経験の無さと、他業務との兼任という条件の中で作ったサイトは、クオリティーの面ではあまりいいものとは言えませんが、この時期がなければ、今の自分はなかったと思います。

カスタムナイフのプロモーションサイト

2009年の1月後半にこの会社に入社して、生まれて初めて制作した企業Webサイトです。当初、ブライダルジュエリーのサイトを作ると
いう話を入社前にお聞きしていて、その準備をして出社したら、
いきなりカスタムナイフのサイトを作ることになり、初めてFlashとDreamWeaverを使うことになりましたがDreamWeaverは操作に
馴染めず、手でコーディングするスタイルに移りました。
それが今のスタイルになっています。

レンタルドレス・フォトブライダルの宣伝サイト

その次に手がけたのは、格安で借りれるレンタルドレスとフォトブライダルのプロモーションサイトでした。
当初は「ちょっと地味なので少しリニューアル」と簡単そうな話だったのですが、作業が進んでいくうちに要望が増えていき、フォトギャラリーに至っては退社するまで変更に次ぐ変更で変わり続けたサイトでした。
当時はレイアウトが上手く出来ずにフリーのテンプレートを利用していたりしてました。

結婚相談所の会員サイト

このサイトは、当初、制作予定になかったのですが、突然持ち上がった「結婚相談所」の開設に合わせて制作することになりました。
結婚相談所という世界を全く知ることなく制作に着手してしまったために、とても戸惑いつつ作業を進めたのを覚えています。
当初は会員ページへのログイン機能を実装するという話でしたが、与り知らないところで話が終わってしまい、多くの作業が中に浮いてしまいました。

介護用品レンタルの宣伝サイト

結婚相談所のサイトが完成すると、「高齢者社会を迎えるからこそ介護商品のレンタルを始めたい」との話があり、介護用品のレンタルサービスを宣伝するサイトを作ることになりました。
早く立ち上げたいとのことなので、完成度の高かった別の業者が作った結婚相談所のサイト（二つも作ったんですね）を大幅に改造して作りました。この作業の際にソースを見ながら自分の技術の未熟さを痛感しました。

不用品回収業務の宣伝サイト

介護用品の業務が始まると、次は「配送業務の閑散期（8月）対策に、不用品回収サービスをやりたい」とのことで、不用品回収サービスの宣伝サイトを作ることになりました。
このときは、ページの更新が頻繁になるという話もありましたので、FreeStyleWikiというCMSを使って、僕がいなくても編集作業ができるように制作しました。
純粋にhtmlで書いているわけではないので、いままでとは勝手が違う制作進行の状態でしたが、それでもうまく進めることは出来たと思っています。

ブライダルジュエリーの宣伝サイト

ここでやっと入社当時に依頼されていたブライダルジュエリーのサイトの制作に着手しました。
レイアウトのイメージは出来上がっていたのですが、時間が経っていることもあって最初から作りなおすことにしました。
JavaScriptでスライドするブランド一覧メニューやトップページのFlashは、他の業務との兼ね合いもあってかなり時間がかかりました。このサイトも、増えていく要望を如何に処理していくかという部分に腐心したところも、とても思い出深いです。

レンタルスタジオの宣伝サイト

このサイトの制作をしているときは、サイト制作よりも他の業務に駆り出される時間が多くなり、本当に時間がない中で、既存のサイトをコンセプトから練り直す作業が必要になったこともあり、非常にシビアな作業になりました。
このサイトの制作中に他の業務中が原因で酷い腰痛をわずらい、完成させることが出来ませんでしたが、僕としては既存のサイトよりも何倍も良いサイトになるはずでした。

休職・退社後

最後に手がけたレンタルスタジオのページにいたっては、完成目前まで出来ており、あとは確認していただくだけのところまで完成していましたが、他の業務が原因で体調を損ない、休業。その後、療養しつつWebでの集客方法を模索している中、会社との関係が悪化し退職にいたりました。
療養中に知人の紹介で参加させていただいた案件で体験したことや、非常に緻密で綺麗なhtmlやcssのソースに衝撃を受け、「このレベルにたどり着きたい」と思ったのを覚えています。
また、業務のディレクションとphpのコーディングをこなす知人の業務姿勢を見て、「何かプログラムを書けたほうがいいのか」と感じ、それが職業訓練を受けるきっかけになりました。

BowWorks（初代）

以前の会社に在職中に制作した「不用品回収サービス」のサイト制作の時にたたき台にしたレイアウトを時間を見ながら制作したもの。
厳密には在職中に作ったものではありますが、時期的に微妙なところなので、退職後のところに掲載しました。
「エア企業サイト」という冗談のサイトですが、僕自身が考えていることを誰かに伝えたいと思って作りました（といっても未完ですが）。
現在はコチラで見ることが出来ます。

以上がBowWorks（初代）の説明です。

BowWorks（二代目）

初代のBowWorksを作ってしばらく放置していたわけですが、JAVAの職業訓練を受けることが決まり、自分の自己紹介のつもりで作り直したのが二代目のサイトです。
当初はいろんなところに分散しているBlogなどのRSSを全部表示しようかと思っていたのですが、あまりにもゴチャゴチャするので、メインの二つのBlogのRSSだけを表示しています。
ちなみに初代と二代目、そして現在のBowWorksでも使われているカラーコーンは僕のトレードマークみたいなものです。
現在はコチラで見ることが出来ます。

BowWorks（三代目）

現在のBowWorksはNucleusCMSとvicunaスキンを使って構築したWeb制作やプログラミングの情報を扱うBlogになっています。
自分がこういった業界で仕事をしていこうと思う以上、情報を集めることと発信することは常にセットになってくると思いますので、その訓練のためにも、なかなか更新出来ないのですが、出来る限り長く続けていきたいなと思っています。
現在はコチラで見ることが出来ます。

FactKeeper&PathfinderGhost

現在準備中。
以前、「都市伝説資料館」という携帯サイトを運営していたのですが、情報が古くなってきたのと別のコンセプトでより深い記事をかけると感じ、フルリニューアル中です。
記事の内容もさることながら、携帯サイトとPCサイトの視覚的な切り分けをしっかりさせるための仕組みを模索している最中でもあります。 記事を書く時間がありませんが、こちらも頑張って公開したいです。現在はコチラで見ることが出来ます。

職業訓練

退職後に携わった、とあるWeb制作の案件で、ディレクションをしながらPHPのコーディングをする知人を見て、htmlだけじゃなくて、プログラムも書けなきゃダメ何だと感じ、JAVAプログラミングの職業訓練に参加。 制作実習でショッピングサイトを制作し、そのデザインとhtml/cssのコーディングやjspへの書き換え作業を行いました。その作業はチーム内にhtmlをかけるメンバーがいなかったのと、Webサイト制作のフローを知るメンバーがいなかったこともあり、僕がページ機能の雛形をhtmlで先に制作し、そこに機能を追加していただくような、作業フローになりました。
最終的に目指していた機能より多くの機能を提供されたために、html部分のリプレイスが必要になりましたが、ほとんどの部分が初期のデザインのままで完成となりました。

練習で制作したもの

職業訓練制度の説明の際に「ショッピングサイトの制作実習がある」という話を聞き、それとなく中身の構成を考えていた際に作ったもの。特に目的などがあったわけではなく、どんなレイアウトが考えられるかという練習的な意図で制作しているために、中身に関しては何も考えていませんでした。
ですが、実際に手を動かしてみて、商品の並べ方というか、画面の組み方の参考になったので、そのあとの作業にうまくつなげることが出来ました。

練習で制作したもの（2）

職業訓練の中盤というか制作実習の始まる少し前くらいに、実際に作りかけたものです。
時間があったらhtmlからjspやサーブレットまでひと通りを自分でつくってみようと思い、制作を進めていたのですが、結局は間に合わず、しかも制作したソースを回収するのもわすれてしまったため、手元にあるのはこの画像だけです。商品の画像などはDoppelGangerのサイトから無断で拝借してきました（サンプルサイトなのでご容赦願います。問題が生じた際は削除します）。

制作実習で制作したもの（トップページ）

実際に制作したショッピングサイトは「駅前の花屋さんが観葉植物のネット通販をするためのサイト」という設定で、ひと通りの機能を持たせました。
観葉植物ということもあって、出来る限り空気感があるようなサイトにしたいと思い、最初はかなり試行錯誤しました。
htmlやcssのコーディングで気をつけたところは、「僕以外のメンバーがJSPへのリプレイス作業をしたとしてもわかりやすいように」というところです. そのために、出来る限り単純なhtmlの構造でレイアウトするように心がけました。
素材に関しては、無印良品の観葉植物のサイトから拝借しています（こちらも問題が生じた場合は削除します）。

制作実習で制作したもの（商品ページ）

1つのJSPで15種類の商品用のページを切り替えて表示するページのテンプレートです。
商品ページらしくないのは商品単体の写真がないためでしょう。
素材に制限があったために、苦肉の策としてこのような方法をとりました。画像素材が少ない状態での作業だったので、いろいろと悔いが残る部分ですが、時間をかけて考えたこともあって、商品のシズル感は表現できていると思います。

制作実習で制作したもの（カート内部ページ）

このページは意地になって定義タグ（tl・td・ddなど）でレイアウトしたため、表組の要素の入れ替えに悩んだところです。
また、フォーム関係（form・inputタグなど）のcss指定を初めて書いたため、調べたりするところで結構時間がかかりましたが、他のチームにはないオリジナリティーを獲得できたのではないかと思います。
また、出力された結果の文字列の配置には、もうちょっと気を使いたかったなあという心残りもあります。

制作実習で制作したもの（顧客情報入力ページ）

このページだけは僕もプログラムに参加しましたが、自分の不勉強さが身にしみました。
基本的には別ページの仕組みを流用して作ったのですが空入力チェックやメールアドレスのバリデートなど、悩んで組んだのですが、効率が悪い人のことで最終的に別のプログラムになりました。 ここもフォームのデザインが難しく、どうすれば違和感なく表示をまとめることが出来るかを自宅に帰っても考え続けました。

制作実習で制作したもの（最終確認ページ）

お客様が購入した商品の情報と、入力した情報を再確認するページで、カート内部ページの内容と、顧客情報入力ページの内容をひとつの画面にまとめて表示するページですが、提出期限のぎりぎりになってボタンが2つふえるというサプライズもありましたが、何とか完成させることが出来ました。
その苦労もあって、利便性は高くなったと自負していますが、次に制作するときは、もっとコンパクトにしたいですね。

制作実習で制作したもの（完了ページ）

他のページに比べて時間を掛けることができなかったということもあって、あまり凝ることが出来ませんでしたが、完成させることが出来たという自信がついて、いい実習になったと思います。
このページも実は最終的にナビゲーションが追加になり、最後の最後でその辻褄をどう合わせようかと悩んだのを覚えています。
このあたりも時間との兼ね合いで省略せざるを得なかった仕組みがいくつかあったので、いつかそれを試してみたいと思います。

自己紹介や経歴など

愛知県一宮市に住む三十路末期の男性です。既婚ですが子供はいません。
趣味らしい趣味はないのですが、ネット中毒ともいえるくらいに、ネットをさまよう毎日を過ごしています。
専門学校でプロダクトデザインを学びましたが、バブル崩壊後で就職もままならず、友人の親戚が営む製菓機械の製造会社に一度就職しましたが、ゲームを作りたくなって上京。 新聞配達をしながらゲームシナリオや企画の勉強そしている最中にDTPというものに出会い、その後は様々な会社を転々としながら、雑誌の編集やDTPオペレーター、パッケージデザインなどの印刷業界に関わる業務を10年ほどしていました。
昔からWeb制作に興味を持っていましたが、実務に関わることが出来ず悶々とする中、未経験でもWeb制作をさせてもらえる会社を探していて、以前の会社に入社しましたが、上記の事情により退社し、現在に至ります。

最後に

このページは、以前に何処かのサイトで拝見したシングルページのWebサイトにヒントを頂き、自分なりに再現してみたものです。
最近はJavascriptのライブラリが充実していて、様々な動的な表現が利用出来るようになってきましたが、自分としてもこのような仕組みをより多く理解し、より表情豊かで優れたWebサイトを作るとともに、インターネットを隔てて誰かと誰かが手を繋ぐというシーンに、より多く立ち会いたいと思っています。