ウェブデザイナーMATUKIのポートフォリオ

制作実績

画像をクリックすると下に詳細が表示されます。

[WEBサイト]

NAUIダイビングサービス
「TAKARA DIVE」

Design,HTML5/CSS3,jQuery,
Javascript

2016年にサイトリニューアル。前回、更新作業はクライアントにHTMLで修正していただくようマニュアル作成したのですが、ところどころ間違いがあったので、更新作業はテキストファイル（jsonファイル）のみでできるようにプログラムを組みました。クライアントさんが遠方から来る機会があり、直接、更新方法の指導もさせていただき、熱心なクライアントに大変助けられました。感謝しております。

http://takaradive.com

[WEBサイト]

「ぐでたま占い」「あかさたな占い」で有名な開運研究家 宇月田麻裕さんのオフィシャルサイト（2015年　制作）
「Happiness Factory」

Design,HTML5/CSS3,jQuery

宇月田麻裕さんは「開運研究家」と「ドッグトレーナー」の顔があり、このサイトリニューアルでこの２つの顔をもつことをアピールしています。

http://happiness-f.com

[WEBサイト]

リードエグジビションジャパン株式会社のコーポレートサイトの中のページ
「Tokyo Sightseeing」

Design,HTML5/CSS,jQuery

リードエグジビションジャパン株式会社は日本最大の国際見本市主催会社です。このページは海外から来られた方の為の東京の観光名所の紹介のページです。展示会の詳細を伝えるサイトは展示会毎に分かれていて、約１４０サイト全てCMSで制作されています。このページは１０以上の展示会のサイトにCMSの機能を使用して表示しています。横幅750pxから930pxまで対応できるよう作りました。

http://www.tokyo.reedexpo.co.jp/en/Tokyo-SightSeeing/

[WEBサイト]

動物殺処分０を目指して活動している会社
「Happiness Factory」

Design,HTML5/CSS3,jQuery

動物愛護の観点から「堅実で信頼感を与えるイメージ」の茶色と「親しみや暖かさを感じる」オレンジを使いました。
WORD PRESSのブログ設置とブログのデザイン＆制作もさせていただきました。

http://www.happiness-f.net

[WEBサイト]

「あかさたな占い」で有名な開運研究家 宇月田麻裕さんのオフィシャルサイト
（2013年　制作）
「Happiness Factory」

Design,HTML5/CSS3,jQuery

彼女の好きな色はピンク系や紫色で、占いという神秘的なイメージにも紫色はピッタリなので紫色をメインに作成しました。
レスポンシブWEBデザインです。

[WEBサイト]

NAUIダイビングサービス
「TAKARA DIVE」2010年度版

Design,HTML/CSS,jQuery

ダイビングショップのサイト。ショップの方が写真の部分を自分で変更したいという希望があり、メイン画像の他、メニュー部分の小さい画像も文字と画像は別に作成して、指定したフォルダーの中の写真を変更すれば変更できるようにしました。

[POI(地図記号)]

携帯ナビゲーションサービス
「全力案内！」のPOI（地図記号）

Design

容量制限があり、最初はすべてアンチエイリアスなしで制作しました。最初のPOIの制作期間は１週間。アンチエイリアスなしでの制作は、根気のいる作業で、残業の毎日でした。

[アイコン]

携帯ナビゲーションサービス
iPhone版「全力案内！」の操作用アイコン

Design

アップル社のイメージを参考にグラデーション使いにこだわって制作しました。

[アイコン]

携帯ナビゲーションサービス
Android版「全力案内！」のアイコンいろいろ

Design

操作パネル部分で使用するアイコンは、なんとかアイコンだけを見て、何の機能か理解できるようにしようと頭をひねりました。 カテゴリーメニューで使用するアイコンも同じようにアイコンだけで判断できるよう制作しました。

[アイコン]

携帯ナビゲーションサービス
「全力案内！」

Design

アイコンの作成は初めての事で苦労しました。最初は、GPSを描いたり、車や道路を描いたりしていましたが、ある時、「全力案内！」のロゴの「全力」の部分だけのほうがいいかもしれないと思い、作成してみたところ、同僚からもこれがいいという事でこのアイコンに決まりました。アイコンが実際に使われた時は、「ダサイ！」という批判的な批評がかなり多かったようですが、それも一つの狙いだったので良かったと思いました。アイコンは目立つ、一度見たら忘れない印象が大切だからです。いつの間にか誰も批判しなくなり、すっかり定着していきました。

[スマートフォンサイト]

携帯ナビゲーションサービス
iPhone版「全力案内！」の機能を紹介

Design,HTML5/CSS3

初めてのスマートフォンサイトの作成でした。どんな機能があり、どこで購入できるのか、すぐわかるよう、できるだけ内容を簡潔にまとめ、レイアウトも複雑にならないようにしました。

[WEBサイト]

携帯ナビゲーションサービス
「全力案内！」

Design,HTML5/CSS3,jQuery

「全力案内！」のWEBサイトは2007年のリリースの時から2012年の間に3度デザインのリニューアルをしました。このサイトが最後のデザインです。『全力案内！」のロゴの青色を中心に作成し、他に未来型ナビゲーションシステムのイメージを伝える為、先進的なイメージの青緑色を使いました。

六本木情報サイト

[携帯サイト]

六本木情報サイト…「全力案内！」とのタイアップ

Design,HTML

六本木にこのサイトのQRコード付きポスターがあり、アクセスすると六本木情報サイトが見れ、行きたい場所があったら「全力案内!」で道案内をしてもらえるというサービス。WEBでは既にサイトがあり、そのサイトのイメージに沿って制作しました。

[携帯サイト]

志賀高原スキー場と「全力案内！」のタイアップ用サイト

Design,html

ゲレンデ情報・道路の渋滞情報・リフトの込み具合・スキー場内のレストランのメニュー・観光情報まで掲載。かなりのボリュームがありました。観光スポットが掲載されていて、「全力案内！」で道案内をしてくれるというサービスを提供していました。

[携帯サイト]

軽井沢スキー場と「全力案内！」のタイアップ用サイト
「全力案内！」

Design,HTML/CSS

「ゲレンデ情報・道路の渋滞情報・リフトの込み具合・リフトの割引券・観光情報・プリンスホテルの温泉割引券など掲載。かなりのボリュームがありました。観光スポット情報が掲載されていて、「全力案内！」で道案内をしてくれるというサービスを提供していました。

http://www.z-an.com

[携帯サイト]

ガーラ湯沢スキー場と「全力案内！」のタイアップ用サイト

Design,html

ゲレンデ情報・リフトの込み具合・スキー場内のレストランのメニュー・観光情報まで掲載。かなりのボリュームがありました。観光スポットが掲載されていて、「全力案内！」で道案内をしてくれるというサービスを提供していました。

[WEBサイト]

携帯ナビゲーションサービスの会社
「全力案内！」

Design,HTML/CSS

「全力案内！」のWEBサイトは2007年のリリースの時から2012年の間に3度デザインのリニューアルをしました。リニューアルは全て私が担当し、このデザインは2008年に行った1回目のリニューアルのものです。「全力案内！」の強みである機能がすぐわかるようレイアウトを考え、何度かトップページのレイアウト変更がありました。

[バナー広告]

携帯ナビゲーション「全力案内！」のバナー広告

Design

「全力案内！」が2007年8月にリリースされ、それから2008年までは頻繁に携帯電話のバナー広告を出していました。infoseek・ mixi・モバゲー・EMOBILE・食べログなど、頻繁に出していました。バナー広告には厳しい容量制限があり、ほとんど１KB〜２KBでしたので、そのため、一つ作成するのにアンチエイリアスを無くす作業などもあり、１時間ぐらいはかかっていました。特にYahoo!は1KB以内でしたので、とても苦労したのを覚えています。

[携帯サイト]

携帯ナビゲーションサービスの会社
「全力案内！」

Design,HTML

「全力案内！」は2007年８月にリリースされ、ロゴのデザインが変更になったことで1度だけ携帯サイトのデザインがリニューアルされました。リニューアルは私が担当し、このようにデザインしました。30代から40代の男性の方をターゲットに制作しました。

[携帯サイト]

携帯ナビゲーションサービス「全力案内！」ランディングページ

Design,HTML

「全力案内！」の機能を簡単にわかりやすく説明したページです。GIFアニメーションを使用して、主な機能がするわかるように制作しました。

[携帯サイト]

携帯ナビゲーションサービス「全力案内！」ランディングページ

Design,HTML

当時(2007年-2008年)「全力案内！」では「ゆびりん」という犬のキャラクターがいました。そのキャラクターの可愛いイメージを売りに女性ユーザーを増やしたいという会社の意向がありました。これは日本経済新聞社のMoveTokyoというサイトで掲載されたようです。キャラクターを使って全力案内！のサービスを上手く紹介した作品です。ランディングページはたくさん制作しましたが、個人的には一番気に入っています。

[携帯サイト]

携帯ナビゲーションサービス「全力案内！」ランディングページ

Design,HTML/CSS

リリースしたての頃に作成した「全力案内！」の機能を簡単にわかりやすく説明したランディングページです。コンテンツ内容も社員の方と一緒に考えました。

[WEBサイト]

千葉の人材派遣会社ジャパンサポート

Design,HTML/CSS

トップページの制作とサブページ以下のデザインと制作を担当しました。人材募集のページは会社の方が更新をしたいという要望でしたので、なるべく更新しやすいように作成し、更新作業のレクチャーにも行きました。人に教える事の難しさを痛感した体験でした。

[WEBサイト]

手作りバックのお店「レイスタイル」

HTML/CSS,SEO,Javascript

私の初めてのお仕事です。制作とサブページの一部のデザインを担当しました。生地とバックの種類を自分で選んでオリジナルのバックの作れるお店です。生地は３３種類,バックの種類は２１種類で、一つのバック毎にその生地を使った場合の３３枚の画像が必要なのですが、バックの写真は全部は無かったので、生地の写真からバックの形を切り抜いて作成しました。その数、約680枚です。それはそれは根気のいる作業でした。バック事に柄の大きさも考えて、陰を薄くつけるなど工夫していたので、画像の制作だけでも、１ヶ月ほどかかりました。でも、このお陰でWEB制作者としての力がついたのだと思います。