Web Creator KUMIの
作品集

一橋大学津田塾大学吹奏楽団

一橋大学津田塾大学吹奏楽団のホームページ刷新を行いました。毎年保守担当者が変わる大学生がメンテナンスをする、という難しい条件のもと、情報設計を行いました。WordPressのプラグインであるAdvanced Custom Fields（ACF）を使用し、HTMLなどに慣れていない学生さんでも、簡単にサイト更新ができるようにしました。

YOKOHAMA VOX

1型糖尿病の当事者やご家族、医療従事者に向けたイベントを開催している団体のホームページ制作を担当しました。

私自身が本団体の運営に関わっており、活動の存在をより多くの人に知ってもらいたいという思いから、サイトのリニューアルを提案・実施しました。

本案件の特徴は、制作にあたって明確な発注者や窓口担当者がいなかった点です。団体内の一員として、複数のメンバーの意見を整理しながら方向性をまとめる必要があり、通常のクライアントワークとは異なるディレクション経験を得ることができました。また、サイト構成や文言、情報整理の方針決定なども自ら主導し、ユーザーにとって分かりやすい情報設計を意識しました。

なお、本案件は自身が所属する団体活動の一環として行ったため、制作費用は発生していません。

電子書籍（結婚引き寄せ術）表紙

電子書籍の表紙のデザインを行いました。コンペを通過しての採用となりました。
お客さまからは「うまくいかないというイラストがわかりやすく将来の結婚へのイメージもつきやすいと思いこちらを選びました。」というお声をいただくことができました。

美容医療系バナー

70件超の応募があったコンペ案件で採用されたバナーです。
美容医療・整形の体験者に直接質問ができるサービスのSNSの広告用バナーを作成しました。

制作において意識した点は、バナーを見る人が一目でサービスの内容をイメージできるようにすることです。また、チャットの内容の具体例を表現するために吹き出しを使いました。吹き出しにより情報量は増えてしまいましたが、吹き出しの背景色を透明にすることで、タイトルやサービス内容の説明など、重要な文章が埋もれないように工夫をしました。

ランニングイベント広告

お世話になっているパーソナルジムさんからランニングイベントの広告作成を依頼されました。
既存チラシのデザインを、より見やすいものにデザインし直すという案件でした。「ぱっとみ、ワクワクする、情報が入ってくる、デザインにしたい」というご要望でしたので、親しみやすいイラストとポップなカラーを使用してデザインを行いました。
また、既存チラシの中の情報を、重要な要素と参考的な要素に分けて構成を行いました。

パーソナルジムのバナー

パーソナルジムのFacebook広告の制作案件です。応募数のべ88件のデザインコンペで採用されました。

お客さまからは「メインのコピーが一番目に飛び込んでくるデザインが気に入り、こちらに採用させて頂きました。」と言っていただくことができました。

フェルヴェール管楽合奏団

市民吹奏楽団のホームページのリニューアルを行いました。従来こちらの楽団は自身のサイトを所有していらっしゃいましたが、過去に作成されたものであったため、アクセス数の向上を目指しての改善の要望がありました。

デザイン性を高めることやレスポンシブル対応、マークアップ構造の見直し、コンテンツの精査などを行いながら、開発を行いました。

団員の方からの評判も良く、新規団員の申込みも増えているそうです。

野球オンラインサロン

野球オンラインのランディングページを作成しました。男性の心にガツンと響くイメージを意識しました。ランディングページの制作経験を積むことを目的に制作を行いました。

備考：野球オンラインサロンNEOREBASEさまのLP制作案件の要件に基づいてサイトを作成しました。NEOREBASEさまのサイトを参考としたことについては、私の通うスクールの許可を得ています。

野菜ジュースのバナー

バナーの習熟として「30代のママ向けに、有機野菜10種類でできたジュースの訴求」のバナーを作成しました。
バナー習熟用サイトから課題をお借りしました。（https://webtan.tech/bnr_juice/）

おせち特集のバナー

バナーの習熟として「ネットショップ内の「おせち特集」ページに誘導する」バナーを作成しました。
バナー習熟用サイトから課題をお借りしました。（https://webtan.tech/bnr_osechi/）

アビリンピック金賞作品

令和５年１０月２８日（土曜日）に神奈川障害者職業能力開発校会場にて行われた、第２１回神奈川県障害者技能競技大会～アビリンピック神奈川２０２３～の事前課題の成果物です。私はHP部門に参加し、金賞をいただくことができました。

課題の内容は「これまで訪れたことがない方に行ってみたいと思ってもらえるように、国内外の来訪者や近隣の住民が温泉地の良さやバリアフリーの対応状況を知ってもらえるような紹介ページを作成すること」でした。視覚に障害のある方にとって読み易いサイトとすることはもちろん、パソコンの操作に慣れていないユーザや外国人の方でも分かりやすいデザインなどを意識する必要がありました。

サイトの美しさと使いやすさのバランスを取る、という難しい課題に果敢に挑戦しました。

英会話教室のバナー

バナーの習熟として「英会話教室の新学期キャンペーン用」のバナーを作成しました。
バナー習熟用サイトから課題をお借りしました。（https://webtan.tech/bnr_point/）

ワンちゃん猫ちゃんへクリスマスプレゼントのバナー

「ワンちゃんや猫ちゃんに「クリスマスプレゼントを買おうよ」という訴求」のバナーを作成しました。
バナー習熟用サイトから課題をお借りしました。（https://webtan.tech/bnr_pets/）

《習熟》Job Place Cozy

PHPとCSSの習熟として、一般社団法人就労支援協会Job Place CozyさんのWebサイトリニューアルを行いました。既存サイトは福祉を意識したデザインでしたが、今回の改修では「IT企業っぽい雰囲気にしてほしい」という依頼を受けました。

各種要素に細かくアニメーションなどを付与することで、リッチなサイトとしました。是非下記URLをクリックしてご確認ください。

《習熟》遺品整理・ゴミ屋敷清掃の会社

遺品整理・ゴミ屋敷清掃の会社のWebサイトサンプル作成を行いました。内容は既存の会社をサンプルとして使用しています。

このサイトのターゲットは主に年配の方です。年配の方にとって使いやすいサイトとなるように工夫を凝らしました。例えば、PC画面では左サイドバーに固定メニューを設けて情報を一覧で表示しています。また文字サイズは基本的に大きめにして、タイトルと本文にメリハリをつけることで、可読性を高めています。

「遺品整理・ゴミ屋敷清掃」という、一見暗いイメージになりがちなテーマであるにも関わらず、明るい雰囲気のサイトを作ることができました。

《習熟》ふれあい動物公園

CSSアニメーションやデザインの習熟として作成した作品です。こちらのサイトは習熟用として作成しました。
「親子で楽しく見られるサイト」をコンセプトに、可愛い動物を各所にあしらいました。それによりレスポンシブルの対応は難しくなりましたが、細かいブレイクポイントを設定することで対処をしました。特にフッターは力作です。

また「広場の仲間たち」のコーナーには、画面タップで遊べるアニメーションを入れています。

参考：相模原麻溝公園さまのサイト

《習熟》一橋大学津田塾大学吹奏楽団

PHPを使ったHP作成の習熟として、吹奏楽団のWebサイトの作り直しを行ってみました。HTMLを使ったサイト更新が難しい学生さんがメンテナンスをするということを意識した設計を行いました。具体的には、専用のExcelを更新することで、サーバにアップロードするデータを自動生成するような仕組みです。

最終的には、このデザイン案と実装案をクライアントである楽団の学生さんにお見せして、実際の案件を獲得することができました。実際の案件では、学生さんの希望する色味や雰囲気を聞き取り、別途デザインから一連の作業を行いました。

《習熟》フェルヴェール管楽合奏団

習熟課題として市民吹奏楽団のHPを作成しました。こちらの楽団さんからは、最終的に別のデザインで依頼を受けて、別途サイト作成を行いました（https://www.ferveur.net/）。

この習熟課題では、楽団のモットーである「情熱的」をテーマにデザインを行いました。コンテンツの多いサイトでしたが、PHPを活用して効率を意識して開発を行いました。

コテージサイトのデザイン

就労移行支援事業所Job Place Cozyでの実案件です。デザインコンペが行われましたが、不採用となりました。