こんにちは！
職業訓練校であるフェリカテクニカルアカデミーで学んだWEB制作についてのポートフォリオサイトです。

doll

works

KARZWORKS （株式会社マーミット様）

Karzworks

使用ツール

Dreamweaver,Photoshop,Illustrator

制作期間

構想&打ち合わせ：2週間
コーディング：1週間
画像加工：1日

概要

株式会社マーミット様内、KARZWORKSというブランド名の社長の赤松様本人が制作されたオリジナルモンスターフィギュア、スチームパンクアイテムを主に紹介するサイトです。フィギュアは概ねソフトビニール製になります。
情報が更新しやすいようWordPressを使いオリジナルテーマを作成しました。

コンセプト

ソフトビニールのモンスターフィギュアやスチームパンクアイテムはややニッチな分野です。若干のアングラ感を意識しながら、フィギュア本体そのもののインパクトと魅力が伝わるようデザインしました。

Karzworksモックアップ

仕様について

レスポンシブ対応です。
ナビゲーションの文字は1040px未満のタブレット等で表示した際には、"menu"でまとめて折りたたむ設定にしています。また投稿のアイキャッチ画像も約半分のサイズにすることで、なるべく投稿を広く見せるようにしました。

768px未満のスマートフォン等での表示時はメインイメージをオフにし、ロゴの下にすぐ投稿を表示しております。
h1の見出しである「KARZWORKS」のサイト名は一見画像のようですが、テキストをCSSで非表示にしており、HTMLのアウトラインを見た時の構造にも気を配りました。


制作過程

karzworks制作過程1

karzworks制作過程2

karzworks制作過程3

制作過程のポイント

マーミット様が出展しているイベントに足を運び、打ち合わせを行いました。実際に客層を確認することによりターゲットが絞りやすくなり、サイトを作る上での参考になりました。
モンスターフィギュアの方のターゲットはほぼ男性で、年齢層もやや高めでしたので、メニューのナビゲーションなどはあえて英字表記は使わず、シンプルにわかりやすく日本語表記にしております。

作品数が多くギャラリーページでそれをどう整理し、紹介するかに苦心しました。一度エクセルで作品リストを作り、紹介する作品の確認を取り、最終的にシリーズごとに制作年月日が新しい順番で並べています。

ギャラリーページ

karzworksギャラリー

karzworksギャラリー

このサイトのメインとなるギャラリーページです。
トップにはメインとなるアークデーモンシリーズのモンスターフィギュアを並べています。

ウルトラ怪獣大集合ではないですが、イメージとしてはモンスターフィギュアをぎっしり横に並べて、威圧感を出したかったのですがPC画面で見たときに、ごったになってしまったり沢山並べることでサイズが小さくなってしまっては、迫力が落ちるので5体厳選しました。

スマートフォン表示時は左の1体のみを表示しております。

ページ一覧

karzworks01

karzworks02

karzworks03

karzworks04

karzworks05

karzworks06

MAYZ PORTFOLIO

#

使用ツール

Dreamweaver,Photoshop,Illustrator

制作期間

構想&取りまとめ：1週間
コーディング：3日
画像加工：1日

概要

現在のこのサイトです。
職業訓練校で学んだ事の集大成として制作しました。
まだ未完ですが、鋭意制作中です。

求職者支援訓練校で制作した習作

　→ 訓練カリキュラムについて

plofile

MAYZのプロフィール

  • May 1981

    東京都の世田谷区の豪徳寺で生まれました。近所には地名にもなっている、招き猫で有名な豪徳寺があります。
    生後すぐ世田谷区の代田へ転居して2014年までの多くを過ごしました。下北沢へも10分ぐらいでしたので、あのエリアについては詳しいです！

  • Apr. 2000

    芸術学部美術学科　日本画専攻

    絵自体も好きですが、日本画で使用する岩絵の具に対する興味で日本画を選択しました。
    もともと天然鉱物が好きで鉱物を粉砕したものをそのまま、膠で定着させて絵の具として使うことにロマンを感じております。

  • Mar. 2004

    卒業制作は下記になります。

    卒業制作　F130号

  • May 2004

    資本金16億7千万円　従業員数1,068名　航空測量、建設コンサルタント

    道路・橋梁設計に関する部門に所属し、設計補助業務に従事しておりました。

  • Sep. 2014

    東京オリンピックも決定し、土木系は好景気で仕事自体は充実しておりましたが、転居により通勤時間が2時間弱かかるようになり退職しました。

  • Feb. 2015

    退職後一念発起し、前々から興味を持っていたWEB制作について学習するため、職業訓練校であるフェリカTAに入校しました
    本を読むだけでは得られない実践的な知識と、半年間毎日通い計610時間学習できることに魅力を感じました。

  • Aug. 2015

    HTMLやCSSでのコーディング。photoshop、illustratorを使用したナビゲーションボタン、バナー等の画像素材作成、カンプ作成を学びました。
    JavaScriptやPHPの基礎的なプログラミングを学びました。

    WordPressについては特に興味があり、実際に企業サイトで使用されているテーマの作成を行いました。
    PHPと絡め、現在さらに学んで生きたいと感じております。

skills

現状の自分のスキルについての主観的評価です。

HTML

HTML4から勉強を始めました。sectionやarticleといったHTML5の要素にも対応できます。適切なアウトラインを意識してマークアップしています。

CSS

通常のサイトはもちろんレスポンシブデザインから.htaccessを使ったモバイルサイト等に対応できます。CSS3を使っtてアニメーションを使用したサイトも作成しました。

PHP

プログラミングの基礎的な部分を学びました。問い合わせフォームとデータベースも使用したニュースサイトを作成しました。WordPressと併せて現在さらに勉強する予定です。

WordPress

既存テーマのカスタマイズやある程度なら1からテーマを作成できます。ローカルで作成したデータのサーバー移行など。現在とても関心があり勉強したいと思っております。

JavaScript

基礎的な構文を学び、ライブラリをカスタマイズすることが出来ます。

jQuery

多くのプラグインの利用や、簡単なカスタマイズをすることが出来ます。アコーディオンパネル等のコードを書くことが出来ます。

Photoshop

バナー、ナビゲーションボタン、カンプの作成。写真の加工やパスを利用してアイテムの切り抜きができます。

Illustrator

基礎的なツールの使い方は習得しております。ボタンやロゴの作成、トレースができます。

その他のソフトについて

MS-Office：以前の職場で実務でほぼ毎日使用しておりました。Excelのvlookupやif等の関数を使用することが出来ます。Wordでの文書作成やPowerPointでのプレゼン資料作成など。

CADソフト：Webで使用することはほぼないとは思いますが、AutoCADやV-nas等のCADソフトが使えます。

^