
前職は、システムエンジニア(約13年間)で主に業務系システムのWEBシステムの保守開発や作業の効率化を行っていました。
以前より「必要な人に必要な情報を伝えたい」と考えており、 直接人の目に見え反応を得られるWEBデザインやDTPデザインの仕事に非常に興味を抱いていました。
この度、キャリアチェンジでWEBデザインの道に進もうと考え、 職業訓練(創造社リカレントスクール大阪校:2017年11月~2018年2月予定)で商業デザインの基礎を学び、就職活動中です。 2018年2月には、企業実習で実業務を体験予定しています。
WEBデザインの経験を積んだ後に、ディレクターを目指します!
そして、プログラムの知識と合わせ、より良い伝わるサイトを提案していきたいと考えています。
商用WEBデザインを学びながら作成しました。 職業訓練ではMacを使用しIllustratorCC(2017)、PhotoshopCC(2017)、DreamweaverCC(2017)を学んでいます。 自宅ではWindowsを使用し個人購入したCS5を利用して作成しています。
当サイト。職業訓練で学習した要素を入れつつ、日々改良しています。
訓練校の授業の一環でグループ制作(5人グループ)にて実顧客からのヒアリングした上でWEBサイト作成。
中間プレゼン(2018-01-11)までに、TOPページのデザインカンプ2案(A案+B案)を作成。
最終プレゼン(2018-01-24)までに、決定案の下層ページデザイン&コーディングを実施。
40〜50代の時間とお金に余裕があり、美意識の高い女性。
ネイルサロンに行く手間を省き、安心できる自宅で施術をしてもらいたい方。
自分が良いと思ったものを積極的に人に勧めることが好きな方。
中間プレゼン(2018-01-11)
担当:B案デザインカンプ
▼結果▼
高級感重視でA案に決定。
担当分のB案は、非常に分かりやすいと評価を頂いたが、カジュアルではなく高級感重視にしたいとのこと。 A案と異なり利用者重視案だったので狙い通りの評価は得られた。
最終プレゼン(2018-01-24)
担当:メインコーダー
トップページ全体とサブページのテンプレートを担当。サブページはチームメンバーが担当。サブページコーディング時には、チームメンバーに教えながら完成。
デザインカンプを担当したB案のトップページのコーディングも実施。
授業で習わないflexやWebFontも調べて使用して作成。
新単位「vw/vh」とWebフォントの使用実験サイト。LGBT診断というインパクトのある内容でTOPページのみ作成。
LGBTについて少しでも興味をもってもらうようにゲーム感覚で手軽にLGBT診断形式が行え、ネタとして広めてもらえるように期待を込めて作成。
下層ページは作らずにSNS対応してから公開するかも知れない。
LGBTって何?という方。
SNSでネタとして広める層。

職業訓練校の授業にて作成。
カフェサイトのデザインカンプ
Illustratorでメニューアイコン類を作成。
Photoshopでキービジュアル、各種バナー類を作成。
各種素材をPhotoshopで配置・スライスして完成。

職業訓練校の授業にて作成。
カフェサイトのデザインカンプ
Photoshopでキービジュアル、各種バナー類を作成。
各種素材をPhotoshopで配置・スライスして完成。
上下部分などワイドモニタを意識したデザインカンプになります。
落ち着けるアットホームなカフェをイメージしました。

職業訓練校の授業にて作成。
カフェサイトのデザインカンプ
Fireworksを使っている制作会社があるため、基本的な使い方を学んだ。
カフェですが、海らしく青をベースカラーにして作成してみました。

職業訓練校の授業にて作成。
バナー作成の練習
![]()
パッと見て、どの項目を表すのか分かるように作成しました。
2017/12/11(3時間)修正前
2017/12/12(+2時間)修正後
家の近所の駐車場の看板デザイン。実家の家業の仕事で作成。
特殊フィルムにインクジェット印刷し、アルミ板に貼り付ける仕様で、 仕上がり線から10mm内側に針金を通し、フェンスに取り付けます。
看板の色が剥げることを想定して白黒メインでデザイン。
DTP出身のクラスメイトに聞いたところ、余白恐怖症。 最近のインクは落ちないらしく、色々アドバイスを頂き修正することに。 以後、余白に気をつけてデザインを心がけることとなる。
適切なアイコンを使い「月極駐車場の募集」で有ることと「契約時の連絡先」を強調し、 「青空駐車場」と「シャッター付き駐車場」が選択できることを視覚的に盛り込みました。
連絡先の電話番号と担当者をより分かりやすく変更。
仕上がり線から20mm内側にレイアウト領域とし、その中で各要素を整列して、 車アイコンをはみ出して全体に動きを付けています。

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

職業訓練校の授業にて作成。
文字の大きさや配置を工夫し、 主要な文字を背景図形に載せることでロゴを作成。
![]()
職業訓練校の授業にて作成。
セール用のプレゼントアイコン
個人的な趣味で作成したWEBサイトです。 商用は意識していませんでしたが、アフィリエイトをしていることも有りSEO/SEMを意識したコーディングにしています。 主にPHPを利用したシステムを導入しています。
作成したWebサイトで使用しているリンク用バナーアイコン
