STREET FIGHTER × 橿原市

副業として受けた案件で、カプコン創業者の方が橿原市出身であることから、ストリートファイターの橿原市周遊アプリがリリースされるということで、アプリで使用される背景の作成から、背景を使用したバナーや横断幕などを作らせていただきました。

AIを使用しても良いということだったので、商用可能なAdobe Fireflyを活用して背景を作成しました。背景は「香具山」/「コスモス畑」/「藤原宮跡の赤い柱」が写った景観という要望だったのでAIで生成しようとしましたが、これらが写った背景が生成できなかったため、コスモス畑、山、空に分けて生成し、違和感のないようにPhotoshopで合成しました。柱も提供していただいた柱の写真からトリミングしてその背景になじむようにイラスト風に加工して配置しました。

仕事をいただいた当初は、こうしたイラストを扱う仕事をした経験がないこと、AIを使うことへの抵抗などで複雑な気持ちで仕事を請けたのですが、故郷を想って企画した制作者や関係者のことを考えて良いものを作ろうと努め、最終的に先方に満足していただけるものを作ることができてとても嬉しかったです。

副業としていただく仕事は毎回、本職に支障が無いように納期が長いものをいただいていましたが、今回は二週間程で終業後に取り組んでいたのでもっとこうしたかった、こうすればよかったという気持ちもあり、自分でイラストを描くことができれば解消できたことも多かったことで現在イラストが描けるように練習しています。

OS

Windows

TOOL

  • Illustrator
  • Photoshop
  • Adobe Firefly

LINK

NATURALI

株式会社ドリームキャリアの代表が代表を務めるNATURALIのホームぺージリニューアルを行いました。当プロジェクトではWebディレクターとしてほぼ初めて複数人での作業でした。

当プロジェクトには私が外部の案件に参画したことで、業務量の負担を考慮し外されましたが、私の希望により助っ人のようなポジションで参加させてもらいました。新卒3名がワイヤーフレームの作成が未経験ということで、トップページのみ私がワイヤーフレームを作り、それをもとに下層ページを作るという形で進めていきました。

制作品質を向上するために、自分が気を付けていることを、デザインとコーディングのガイドラインとしてまとめて共有しました。ただ、3名のメンバーそれぞれとやり取りをしてしまい、作業中の状況共有が不十分だったこともあり、ガイドラインの共有が行き届かなかったのは反省点です。

また、ガイドラインは絶対にこうすると決めるのではなく、メンバーの意見や状況も考慮して臨機応変に変えたほうが上手くいくということにも気づきました。この経験は、次の機会にも活かしていきたいと考えています。

RELEASE

2023年12月

OS

Windows

TOOL

  • Photoshop
  • Figma
  • AdobeXD
  • VS Code
  • GitHub

LANGUAGE

  • HTML
  • Sass
  • JavaScript

LINK

トーキョー工務店

株式会社ドリームキャリアの代表が代表を務めるトーキョー工務店のサイトリニューアルの話を受け、上長が先方との間に入ってFBをいただきながら制作を進めていき、フロントエンドやデザインなど、バックエンド以外の全ての制作を担当しました。

当サイトを作ることで意識したことは力強さと信頼性の高さを表現することです。ロゴが太いゴシック調なのでゴシックから違和感のないように見出しのデザインを決定し、レイアウトも崩れを出さずに整列させるようにしました。

また、当時JavaScriptを学んだばかりだったので、今までjsファイルを理解して用意しそれに記述するということをしていなかったのですが、jsが必要なところは積極的に取り入れて、わからないところは調べながら自力でソート機能やスマホ版メニューなどを作ることができたので、自分の中の一つの壁だったものを乗り越えられたよい経験になりました。

RELEASE

2023年5月

OS

Windows

TOOL

  • Photoshop
  • Figma
  • VS Code

LANGUAGE

  • HTML
  • Sass
  • JavaScript

LINK

ASIRO OFFICIAL SITE

「ASIRO」とはライブハウスで働いていた際に出会ったインディーズバンドです。もともとあったASIROのサイトが無くなってしまったため、バンドの力になりたいと思い自主制作しました。

最初に作ったサイトは、htmlファイルもcssファイルも何も存在しない状態で、ワイヤーフレームを作ることも知らなかったため、わからないことを調べながらコードの記述からサーバーの契約など全て一人で行ったのですが、サイトを作って後悔するまでの流れを知るよい経験になりました。

現在公開されているバージョンは、Sassを知ったことがきっかけでリニューアルを行いましたが、デザイン力を活かす目的ではなくサイトを作ることが目的であったため以前から作り変えたいとも考えていたためSassを使用してコーディングを行い制作しました。完成後、バンドメンバーに喜んでもらいましたが、運用してみたことで更新しづらくデザインの一貫性がないことなどがあるため、次回はそういった反省点を踏まえてリニューアルを行いたいと考えています。

RELEASE

旧2021年5月 / 新2022年6月

OS

Windows

TOOL

  • Illustrator
  • Photoshop
  • Adobe XD
  • VS Code

LANGUAGE

  • HTML
  • Sass
  • JavaScript

Reёn OFFICIAL SITE

このサイトは私がライブハウスで働いていた時の先輩がやっているバンドで、以前からサイトがあることを知っており、簡易的に作成されたサイトだったため自身のスキルアップを兼ねて制作しました。

サイトを制作するにあたって今まで使用してこなかったinviewやCSSアニメーションを使用して、色がほぼ白黒のため、シンプルなデザインの中にも退屈さを感じさせないように心がけました。

現在はサイトを見せたところ先輩に喜んでいただいたので、実際に公開して連絡を取りながら運用も行っています。

RELEASE

2023年1月

OS

Windows

TOOL

  • Illustrator
  • Photoshop
  • Figma
  • VS Code

LANGUAGE

  • HTML
  • Sass
  • JavaScript

LINK

株式会社ドリームキャリア 営業用LP

株式会社ドリームキャリアではSESというサービスを展開しており、SESを知らない企業に営業をかける際に主に使用されるLPの制作を一人で行いました。

特にこうしてほしいというような要望はなかったので自由に作ることができたのですが、自分の中で気を付けていたこととしては、サービスを紹介するぺージということで要素のスペースを適度に空け、ITをイメージさせる、文章の邪魔にならない程度のイラストを使用することで読みやすくすることです。

RELEASE

2023年1月

OS

Windows

TOOL

  • Illustrator
  • Figma
  • VS Code

LANGUAGE

  • HTML
  • Sass
  • JavaScript

LINK

Gyne+

当サイトは配送スタッフの求人をかけるために完成させたサイトです。会社からの急な依頼でしたが8日間で制作しました。

コーポレートサイトとしてコンテンツが不足おり、素材のために費用を割けず、すぐに作ってほしいという要望だったため、イラストを活用して温かみのあるサイトにしようと考えました。

制作時に特に気をつけたことは配色です。イラストはすべて自分で描いたので決定した色でどのようにして描き、コンテンツとしてまとまりを持たせることを考えながら制作しました。

RELEASE

-

OS

Windows

TOOL

  • Illustrator
  • Photoshop
  • Adobe XD
  • ATOM

LANGUAGE

  • HTML
  • CSS

LINK

イタチ駆除ザウルス 西日本版

当サイトは自然検索でも訪れるユーザーが多いページのあるサイトだったため、UXを改善するためにディレクターの方と相談しながらサイトの構成はそのままにリニューアルを行うことになり、コーディングは更新などで少しコードを書いたことがあった程度でしたが任せていただき、デザインからコーディングまで全て一人で行いました。

私がこのサイトをリニューアルするうえで気をつけたことは、とにかく管理をしやすくすることでした。リニューアル前のサイトはHTMLにCSSが書き込まれていたり、ID指定によって無理やり上書きをされていたためとても管理がしにくい状況でした。管理がしやすいサイトにすることでコンテンツの追加や更新作業をしやすいサイト作りを心掛けました。

また、当時駆除業界でメインビジュアルを動画にしている競合もなかったので、メインビジュアルを動画にすることでサイトでも他社と差別化しました。ワイヤーフレームを作るということも知らずにコーディングして表示確認しながら作ったサイトでしたが、回遊率も改善され、管理もしやすくなり、当時学んだばかりだった動画に関するスキルも活かして制作することができたので良かったと思います。

RELEASE

2020年11月(現在公開されていません)

OS

Windows

TOOL

  • Illustrator
  • Photoshop
  • After Effects
  • Premiere Pro
  • ATOM

LANGUAGE

  • HTML
  • CSS