就職活動用Portfolio(ポートフォリオ) 就職活動用Portfolio(ポートフォリオ)

Profile(自己紹介)

プロフィール画像

プロフィール画像

名前(H/M)
土本（♂）
ゆきりん（♂）・・・実名は転職サイトをご確認ください。
所在地
大阪府堺市内（JR阪和線沿線）
生年月日
1983年5月2日(34歳)
趣味
PC(プログラム) / ネット通販 / ウインドウショッピング
続けていること
月1回以上、長距離を歩く(健康維持と感性強化を兼ねる)
マイブーム
整体に通い姿勢を意識し健康維持を促進する
好きなブランド
無印良品 / ロクシタン(ハンドクリーム)
開発環境（自宅）
Windows + Adobe Web Premium CS5
開発環境（訓練校）
Mac + Adobe Creative Cloud CC(2017)
一言

前職は、システムエンジニア(約13年間)で主に業務系システムのWEBシステムの保守開発や作業の効率化を行っていました。

以前より「必要な人に必要な情報を伝えたい」と考えており、 直接人の目に見え反応を得られるWEBデザインやDTPデザインの仕事に非常に興味を抱いていました。

この度、キャリアチェンジでWEBデザインの道に進もうと考え、 職業訓練(創造社リカレントスクール大阪校:2017年11月～2018年2月予定)で商業デザインの基礎を学び、就職活動中です。 2018年2月には、企業実習で実業務を体験予定しています。

WEBデザインの経験を積んだ後に、ディレクターを目指します！

そして、プログラムの知識と合わせ、より良い伝わるサイトを提案していきたいと考えています。

Skill(スキル)

    • Dreamweaver
    • ★★★★☆
    • Webサイト作成時のコーディング/サイト更新に使用。
    • Photoshop
    • ★★★★☆
    • Photoshopクリエイター能力認定試験1級
    • 素材切り抜きや画像加工に使用。
    • Illustrator
    • ★★★★☆
    • Illustratorクリエイター能力認定試験1級
    • Webサイトのロゴ・イラスト・アイコン作成時に使用。
    • DTPデザイン(CDジャケット・名刺)に使用。
    • Coading
    • ★★★★☆
    • HTML4,5/XHTML1/CSS2,3にてコーディングが可能。
    • jQueryプラグインをサイトに導入し実装が可能。
    • jQueryを使用したAjax通信等が可能。
    • SEO/SEM
    • ★★★★☆
    • SEO/SEMの知識を有し、検索エンジンに優位なコーディングが可能。
    • Program/CGI
    • ★★★★★
    • 情報処理技術者試験[基本情報技術者]
    • C言語プログラミング能力認定試験2級
    • 実用数学技能検定2級
    • PHP/Perl(CGI)/Java/VB/CMD等が利用可能。
    • サーバーサイドプログラムの開発が可能。
    • Design
    • ★★★☆☆
    • 商用デザインを意識したデザインを勉強中!!
    • 色彩感覚
    • ★★★★☆
    • ファッションコーディネート色彩検定2級
    • 画像処理技能検定[CG部門2級]
    • 画像処理技能検定[画像処理部門3級]
    • Office
    • ★★★★★
    • Wordによる文書作成が可能。
    • Excelの関数/マクロの利用が可能。
    • その他の資格
    • 第一種普通自動車免許

Works(作品)

  • 職業訓練以降
  • 職業訓練以降
  • SE以前
  • SE以前

【職業訓練中の作成作品】

商用WEBデザインを学びながら作成しました。 職業訓練ではMacを使用しIllustratorCC(2017)、PhotoshopCC(2017)、DreamweaverCC(2017)を学んでいます。 自宅ではWindowsを使用し個人購入したCS5を利用して作成しています。

WEBサイト

就職活動用ポートフォリオ

就職活動用ポートフォリオ

    • Dreamweaver CS5、Illustrator CS5、Photoshop CS5
    • 公開期間：2017年12月3日～常時更新中
    • HTML5 / CSS3 / jQuery
    • レスポンシブサイト(640px以下/900px以下/901px以上)
    • シングルページ
    • 求人応募用に急遽作成。2日間で形にした後、調整中。

  • 当サイト。職業訓練で学習した要素を入れつつ、日々改良しています。

グループ制作

実在する出張ネイルサロンのWEBサイトを作成中

■A案完成WEBサイト
↑ユーザ「web」パス「web」

■A案デザインカンプ
「きらめく指先　うるおう毎日」出張ネイルサロン｜デザインカンプA案

■B案トップページのみ
↑ユーザ「web」パス「web」

■B案デザインカンプ
「デザイン担当分(ロゴ・メインビジュアル除く)」
「指先かわる。世界がはずむ。」出張ネイルサロン｜デザインカンプB案

    • DreamweaverCC(2017)、PhotoshopCC(2017)、IllustratorCC(2017)
    • 公開期間：2017年12月22日～2018年1月24日(約16日間)
    • HTML5 / CSS3 / jQuery
    • 実顧客からのヒアリング～

  • 訓練校の授業の一環でグループ制作(5人グループ)にて実顧客からのヒアリングした上でWEBサイト作成。

    中間プレゼン(2018-01-11)までに、TOPページのデザインカンプ2案(A案+B案)を作成。

    最終プレゼン(2018-01-24)までに、決定案の下層ページデザイン＆コーディングを実施。

  • 40〜50代の時間とお金に余裕があり、美意識の高い女性。

    ネイルサロンに行く手間を省き、安心できる自宅で施術をしてもらいたい方。

    自分が良いと思ったものを積極的に人に勧めることが好きな方。

  • 中間プレゼン(2018-01-11)

    担当：B案デザインカンプ

    ▼結果▼

    高級感重視でA案に決定。

    担当分のB案は、非常に分かりやすいと評価を頂いたが、カジュアルではなく高級感重視にしたいとのこと。 A案と異なり利用者重視案だったので狙い通りの評価は得られた。

  • 最終プレゼン(2018-01-24)

    担当：メインコーダー

    トップページ全体とサブページのテンプレートを担当。サブページはチームメンバーが担当。サブページコーディング時には、チームメンバーに教えながら完成。

    • コーディング期間：2018年1月21日(1日間)
    • HTML5 / CSS3 / jQuery
    • レスポンシブサイト(flex)(SP/Tablet/PC)
    • WebFont(FontAwesome)。
    • ハンバーガーメニュー

  • デザインカンプを担当したB案のトップページのコーディングも実施。

    授業で習わないflexやWebFontも調べて使用して作成。

LGBT診断

LGBT診断1 LGBT診断2

    • Dreamweaver CS5、Illustrator CS5
    • 公開期間：2017年12月31日～2018年1月2日
    • HTML5 / CSS3 / jQuery
    • レスポンシブサイト
    • Webフォント(Font Awesome / Google Fonts)
    • 単位「vw/vh」使用

  • 新単位「vw/vh」とWebフォントの使用実験サイト。LGBT診断というインパクトのある内容でTOPページのみ作成。

    LGBTについて少しでも興味をもってもらうようにゲーム感覚で手軽にLGBT診断形式が行え、ネタとして広めてもらえるように期待を込めて作成。

    下層ページは作らずにSNS対応してから公開するかも知れない。

  • LGBTって何？という方。

    SNSでネタとして広める層。

デザインカンプ/バナー

デザインカンプ1

    • PhotoshopCC(2017)、IllustratorCC(2017)
    • 作成時期：2017年12月13日
    • 作成時間：1日

  • 職業訓練校の授業にて作成。

    カフェサイトのデザインカンプ

    Illustratorでメニューアイコン類を作成。

    Photoshopでキービジュアル、各種バナー類を作成。

    各種素材をPhotoshopで配置・スライスして完成。

デザインカンプ2

    • PhotoshopCC(2017)
    • 作成時期：2017年12月19日〜20日
    • 作成時間：1日

  • 職業訓練校の授業にて作成。

    カフェサイトのデザインカンプ

    Photoshopでキービジュアル、各種バナー類を作成。

    各種素材をPhotoshopで配置・スライスして完成。

    上下部分などワイドモニタを意識したデザインカンプになります。

    落ち着けるアットホームなカフェをイメージしました。

デザインカンプ3

    • Fireworks(CS6)
    • 作成時期：2017年12月21日
    • 作成時間：1日

  • 職業訓練校の授業にて作成。

    カフェサイトのデザインカンプ

    Fireworksを使っている制作会社があるため、基本的な使い方を学んだ。

    カフェですが、海らしく青をベースカラーにして作成してみました。

各種バナー

    • IllustratorCC(2017)
    • 作成時期：2017年12月6日
    • 作成時間：1時間

  • 職業訓練校の授業にて作成。

    バナー作成の練習

その他

ロゴ/アイコン

    • Illustrator CS5
    • 作成時期：2017年12月2日
    • 作成時間：1時間
    • ポートフォリオ用に作成

  • パッと見て、どの項目を表すのか分かるように作成しました。

月極駐車場の看板デザイン(横600mm×縦400mm)

2017/12/11(3時間)修正前

2017/12/12(+2時間)修正後

    • Illustrator CS5
    • 作成時間：5時間
      「2017/12/11→3時間)」
      「2017/12/12→2時間」意見募り後修正

  • 家の近所の駐車場の看板デザイン。実家の家業の仕事で作成。

    特殊フィルムにインクジェット印刷し、アルミ板に貼り付ける仕様で、 仕上がり線から10mm内側に針金を通し、フェンスに取り付けます。

  • 看板の色が剥げることを想定して白黒メインでデザイン。

    DTP出身のクラスメイトに聞いたところ、余白恐怖症。 最近のインクは落ちないらしく、色々アドバイスを頂き修正することに。 以後、余白に気をつけてデザインを心がけることとなる。

  • 適切なアイコンを使い「月極駐車場の募集」で有ることと「契約時の連絡先」を強調し、 「青空駐車場」と「シャッター付き駐車場」が選択できることを視覚的に盛り込みました。

    連絡先の電話番号と担当者をより分かりやすく変更。

    仕上がり線から20mm内側にレイアウト領域とし、その中で各要素を整列して、 車アイコンをはみ出して全体に動きを付けています。

地図イラスト

    • IllustratorCC(2017)
    • 作成時期：2017年11月29日
    • 作成時間：1時間

  • 職業訓練校の授業にて作成。

    図形のパスファインダによる結合や分割、 線路はアピアランスを使い作成し、 全体をクリッピングマスクで整えました。

ロゴ

    • IllustratorCC(2017)
    • 作成時期：2017年11月29日
    • 作成時間：1時間

  • 職業訓練校の授業にて作成。

    文字の大きさや配置を工夫し、 主要な文字を背景図形に載せることでロゴを作成。

セールアイコン

    • IllustratorCC(2017)
    • 作成時期：2017年11月29日
    • 作成時間：2時間

  • 職業訓練校の授業にて作成。

    セール用のプレゼントアイコン

新規作品が完成次第、常時追加!!

【SE(システムエンジリア)以前の作成作品】

個人的な趣味で作成したWEBサイトです。 商用は意識していませんでしたが、アフィリエイトをしていることも有りSEO/SEMを意識したコーディングにしています。 主にPHPを利用したシステムを導入しています。

WEBサイト

GIFアニメ工房

GIFアニメ工房

    • 公開期間：2004年～
    • CMS(MT)
    • PHP(Saasサービス)・・・GIFアニメ画像を作成をするWEBサービス
専アイ工房

専アイ工房

    • 公開期間：2006年～
    • PHP(Saasサービス)・・・専用アイコンを作成をするWEBサービス
PiTaPaで得する裏技サイト「ピタ得」

PiTaPa(ピタパ)で得する裏技サイト「ピタ得」

    • 公開期間：2009年～
    • Javascript
    • PiTaPaの得する経路検索システム
JR定期券払戻金額計算システム

JR定期券払戻金額計算システム

    • 公開期間：2010年～
    • Javascript(jQuery)
    • JR定期券の払戻金額計算シミュレーション
楽天の売れ筋が分かる『時系列ランキング』

楽天の売れ筋が分かる『時系列ランキング』

    • 公開期間：2010年～
    • PHPシステム(WEBサービスAPI使用)
    • 楽天リアルタイムラインキングの時系列リスト
雑誌定期購読のススメ

雑誌定期購読のススメ

    • 公開期間：2010年～
    • PHPシステム(WEBサービスAPI使用)
    • 雑誌の紹介サイト
楽天アフィリエイト通販

楽天アフィリエイト通販

    • 公開期間：2007年～
    • PHPシステム(WEBサービスAPI使用)
    • 楽天アフィリエイトのWEBサービスAPI使用サイト
WSJ21.NET(ホームページ作成支援)

WSJ21.NET-良いホームページ作成支援サイト

    • 公開期間：2000年～
    • ホームページ作成支援サイト
ウェブ素材専門ホームページ素材屋さん

ウェブ素材専門ホームページ素材屋さん

    • 公開期間：2007年～
    • ホームページ作成支援サイト

その他

バナー

作成したWebサイトで使用しているリンク用バナーアイコン

  • 職業訓練以降
  • 職業訓練以降
  • SE以前
  • SE以前