Nakano's Portfolio

Profile

名前 中野 舜介 （ ナカノ シュンスケ ）
生年月日 1992年5月21日
前職 Web制作会社／ディレクター(3年6ヶ月)
趣味 写真撮影

前職のWeb制作会社にて、Webディレクターとして取材・ワイヤーフレーム作成・ライティング・SEO対策などの業務に従事。3年6ヶ月勤務の後、2020年12月に退職。最終役職は主任で、部下6名のチームを任されていました。

2021年3月より職業訓練校のWebデザイナー実践科に入校。Webデザインとコーディングについて学習し、企業実習を経たのち2021年6月末に修了いたしました。職業訓練の企業実習先ではコーポレートサイトの改善や、楽天市場新規出店に伴うサイト内のバナー作成やコーディングなどのECサイトにおけるデザイン業務に携わりました。

その後は独学でPHP7・WordpressへのCMS化などを学び、2021年10月より、職業訓練校でのWebデザイン開発基礎科の講師補助として、PHP7・WordPressの授業において生徒の不明点に回答・指導する業務に携わっています。

Skill

HTML5/CSS3

JavaScript/JQuery

Wordpress

Photoshop

Illustrator

SEO

アイコンをクリックすると詳細が表示されます。

HTML5/CSS3
前職でのサイト更新で使用しており、改めて訓練校で学習いたしました。
当ポートフォリオサイトなど各種制作におけるコーディングに活用しています。

Works

Works List

Website

※キャプチャ画像をクリックで、サイトに遷移します。
※画像スライドに連動して、表・テキストもスライドします。

  • サイトについて ポートフォリオサイト（当サイト）
    制作について 私自身と制作実績をアピールする意図を持たせ、ポートフォリオサイト自体のデザインは極力シンプルかつ無彩色のモノトーンで仕上げ、色がついている箇所へ視線を誘導できるように制作いたしました。
    また、このサイトを見る採用担当者様の閲覧環境はPC・タブレットが多いと判断し、PC→タブレット→スマートフォンの順に優先順位をつけてデザイン・コーディングしています。
    使用ソフト Adobe XD / DreamWeaver 2021 / Photoshop 2021 / Illustrator 2021
  • サイトについて 個人用途：絞り込み検索ができるデザインギャラリーサイト
    制作について 気に入ったデザインを私自身が探しやすい形で保存し、絞り込み検索するために作成しました。
    『URLと保存した理由・良いと思った点をメモとして残せるようにする』『アイキャッチ用のファーストビューとページ全体のキャプチャを保存する』『予め決めたルールで絞り込み検索が出来るようにする』をコンセプトにしています。
    カスタムフィールド・カスタムタクソノミーで情報を入力・選択し、これらの項目、アップロードした画像は記事一覧や記事ページに反映されるようにテーマのPHPファイル書き換えも行っております。
    ログイン情報 https://nakashun.info/designstock/wp-login.php
    ID/Pass: Vister
    ※個人用途のため、Basic認証をかけています。WordPressにログインすることで、実際の投稿画面についてもご確認いただけます。
    使用ソフト Adobe DreamWeaver 2021 / Photoshop 2021 / WordPress
  • サイトについて 新規開業する友人の鍼灸院のWebサイト立ち上げ
    ターゲット 健康に対する意識が高めの20～30代女性
    制作について 友人の鍼灸院の開業に伴い、写真・動画撮影からサイトマップ作成・ライティング・画像作成などWordPressサイトの初回制作全般に携わりました。WordPressテーマは初心者でも編集しやすいものを選び、今後は友人自身が操作して更新していけるようにしました。
    制作自体は自分のサーバーで行い、完成後友人のサーバーに載せ替えしています。
    ファーストビューの動画は施術内容が伝わるように撮影・編集し、モバイル環境でも読み込みに時間がかからないようにサイズを落としつつ画質を維持しています。
    使用ソフト Adobe DreamWeaver 2021 / Photoshop 2021 / Illustrator 2021 / Premiere Pro 2021 / Lightroom / WordPress
  • サイトについて 実際の楽天市場のピックアップ特集ページ
    ターゲット ショップ内でどういった商品があるか、一覧で確認したい人
    制作について 職業訓練の実習先企業でのアルバイトにて、新たに楽天市場出店することとなり、「カテゴリボタンを押すと、ページ内で商品が一覧で並ぶようにしてほしい」との要望を受けて作成しました。ページ先頭のボタンをクリックすることで、表示を切り替えてユーザーの好みに合わせた商品を訴求するように作成しています。
    また、今後の更新も社内で容易にできるように、コーディングはモバイルファーストで行っております。
    使用ソフト Adobe DreamWeaver 2021 / Photoshop 2021 / Illustrator 2021
  • サイトについて コンサルティング会社のコーポレートサイト：トップページ（架空のWebサイト）
    ターゲット どういった事業をしている会社か知りたい人。会社名での指名検索やダイレクトでの流入を想定。
    制作について コーポレートサイトとして、安心感を与えられるようなカッチリとしたレイアウトで制作。また、トップページなので目次としての役割を持たせて、最低限の情報がまとまるように意識いたしました。
    コーディングはモバイルファーストで行い、容易に更新できるということと、PC・タブレット・スマホと閲覧するデバイスが違っても印象・見やすさが変わらないことを念頭に制作いたしました。
    使用ソフト Adobe DreamWeaver 2021 / Photoshop 2021
  • サイトについて 実際の珈琲店のWebサイト
    ターゲット 珈琲に興味があるが、本格的なものは敷居が高いと感じている方
    制作について 職業訓練校でのグループ制作実習にて、実際の飲食店のWebサイト制作に携わりました。駄菓子屋のような柔らかく親しみやすい雰囲気を出してほしいという要望を受けて、イラストやフリーハンド感のあるデザインを採用し、珈琲に詳しくない方の敷居を下げるように制作しています。
    担当領域 デザインカンプ：HOMEページ
    動画制作：メイン(PC/SP)＆初めての方ページ内
    固定フッターメニュー(SP)の作成
    common.cssの編集
    各所コード修正・画像作成
    jQueryアニメーションの実装
    データ統合・管理＆サーバーへのアップロード
    使用ソフト Adobe XD / DreamWeaver 2021 / Illustrator 2021 / Photoshop 2021 / Premiere Pro 2021

Banner

Movie

制作について 前職にて作成した、カスタマーサポートにてお客様に案内するTeamViewerの設定方法の解説動画です。ITに明るくない方にも伝わるよう、平易な言葉を使うように心がけました。
使用ソフト Adobe Premiere 2020
制作について 訓練校での制作にて、珈琲店のWebサイト制作に携わった際に作成した動画です。本格的な珈琲を自宅でも楽しめるように、順序に沿って視覚的にわかるように心がけました。
使用ソフト Adobe Premiere 2021
制作について 訓練校のグループ制作実習で担当した珈琲店のメインビジュアル動画です。お店の雰囲気に合わせて和柄を採用し、このWebサイトからお店とお客様の円が繋がっていくことを願って七宝柄を取り入れています。
使用ソフト Adobe Premiere 2021
制作について 友人の鍼灸院のWebサイトのメインビジュアル動画として作成しました。施術内容が伝わるように撮影・編集し、ファーストビューとしてループしても違和感のないように意識して制作しています。
使用ソフト Adobe Premiere 2021

Others

種類 楽天市場：店舗レビュー促進メッセージカード
制作について

楽天市場店舗向けにエアーメール風メッセージカードを制作。レビューが条件のノベルティプレゼント対象顧客と、それ以外の顧客用で文面を変えたメッセージカードを作成し、梱包対象者の封入ミスを防ぐために右上のスタンプの色を変えてひと目でわかるようにしています。

右下のQRコードは外部サービスを使用し、アクセス解析とリンク先URL変更を可能にしてメンテナンス性を向上させています。

また、印刷会社の指示に従い、フォントのアウトライン化や塗り足し、CMYKカラーモード、配置画像の埋め込みなどをした.aiファイルを入稿しています。
使用ソフト Adobe Illustrator 2021
種類 架空の生パスタ専門店のチラシ
制作について

A4のチラシとして配布することを想定した、架空の生パスタ専門店のチラシを制作しました。

モノトーンのデザインでスタイリッシュに写真が映えるようにし、写真は淡い色合いに調整しています。

デザインとしてのイラスト・テキストはイタリアンに合うものをチョイスし、空いたスペースを埋める目的で使用しています。
使用ソフト Adobe Illustrator 2022 / Adobe Photoshop 2022