ビジョナル株式会社のデザイナー採用サイトのアートディレクション・デザイン・フロントエンド実装を行いました。  ヒアリングの結果、まだ完全には整っておらず、活躍の余地があるというメッセージを込め、「余白」「崩し」「その人らしさ」というコンセプトを策定。  デザインフィロソフィー「We DESIGN it.」のフォーマットに沿って、掲載メンバーが考える「We DESIGN ______」を手書きで文章化してもらいスキャン。スクロールと同期して筆跡が描かれるようにしました。  また、それぞれが自分らしいと思える場所をピックアップしてもらい、短いループ動画を撮影。 TiktokやInstagram Stories のようなニュアンスを取り入れつつ、「その人らしさ」を表現しました。  元々お題としていただいていた「We DESIGN it with you.」というコピーを敢えてフッターに設置し、応募導線とセットに。 Webサイト全体でストーリーを感じられる設計を行いました。

Visional Designer Recruitment

初の自作ゲーム「Muncell」を制作しました。 色を重ねてカラーマンセルを完成させるシンプルなパズルゲームです。状況に応じて合成と対消滅を駆使しハイスコアを目指しましょう。アルゴリズミックなインタラクションにも注目。グラフィックスはミニマルですが意外と奥が深いパズルゲームです。

Muncell

LSDは個人ブランドです。ロゴ、フォント、名刺、Webサイトの4つのデザイン要素からなります。自分のスキルや人となりを説明するためのツールキットであり、実験場でもあります。  LSD is my personal brand. It is composed of logo, font, business card and website. It is a toolkit for me to explain my skill and personallity to others and is a experiment space.

Design Scramble 2018 でライブパフォーマンスを行いました。TidalCyclesとVEDAでリアルタイムにコードを書き換えて音と映像を出力しました。 ※当日の映像ではなく、同じ素材を用いて再現したものです。  Live performance I perform in Design Scramble 2018. I wrote code in real time with TidalCycles and VEDA and output sound and video. *This is not the video of the day,  reproduced using the same material.

Live Code

<h2 id="h9ad587c7ba">for Student iOS App</h2> 2018年8月にリニューアルされた<a href="https://itunes.apple.com/us/app/bizreach-campus/id1144836532" target="_blank" rel="noopener noreferrer">学生向けiOSアプリ</a>で、情報設計/デザインディレクション/動画ディレクション/アイコンデザインを担当しました。 タイムライン形式のホーム画面を情報設計し、これまでのOB/OG訪問中心のコンセプトからトータルでキャリア選択を支援するコンセプトへ変更しました。それに伴い、タブバーを「ホーム」「検索」「メッセージ」「保存」の4つに整理しました。 <img src="https://images.microcms-assets.io/assets/52f06728542b42dda9cda2fc80fe7366/375057acddd14880842fb4bc5e4048db/image.png" alt=""> アプリアイコンは、iOSアプリ標準のグラデーションを意識し、ロゴのサイズ感等も含め、ホーム画面に置きたくなるデザインを目指しました。 <iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F295042066%3Fh%3D14e84755d8%26app_id%3D122963&dntp=1&display_name=Vimeo&url=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F295042066&image=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F732093399-658029bdd57a7eb421e5f0612ce9553b10290b706161eb321dc5127b49959de4-d_640&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=vimeo" width="886" height="1920" scrolling="no" title="Vimeo embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe> また、オンボーディング動画の絵コンテ制作・アニメーションディレクションも担当しました。キャリア選択の重要性をリアリティを持って実感してもらうために、動画という媒体を使った強い表現が最適だと考えました。 <h2 id="h995f6e221e">Design Guidelines</h2> <img src="https://images.microcms-assets.io/assets/52f06728542b42dda9cda2fc80fe7366/63758457783942078bea9527bbae337b/image.png" alt=""> デザインガイドラインのデザイン/ライティングを担当しました。デザインの良し悪しを判断するためにチームメンバー間での共通言語が必要だったので、最低限の憲法のようなものを策定することを目指しました。 <img src="https://images.microcms-assets.io/assets/52f06728542b42dda9cda2fc80fe7366/d241b382d4b1452c823d20953e09c175/image.png" alt=""> また、ガイドラインに沿ったタブバーのアイコンのデザインディレクションを行いました。 <h2 id="h05b42382c4">新機能紹介記事</h2><img src="https://images.microcms-assets.io/assets/52f06728542b42dda9cda2fc80fe7366/64224987a9a94c0299ac5fb65fa0de1c/image.png" alt=""> デザイン、ライティングを担当しました。対話形式で楽しみながら読める記事を目指しました。 ## Webサイト <img src="https://images.microcms-assets.io/assets/52f06728542b42dda9cda2fc80fe7366/da6b58b5966b4541adeca3ab0bdc0549/image.png" alt=""> Webサイトのリニューアルに伴うデザイン/フロントエンド実装を行いました。リニューアル前は大学別のランディングページが存在し登録への導線が複雑だったため、登録ボタンを一本化する提案を行いました。またファーストキャリアを考えるにあたってのワクワク感を重視しました。

大学生のキャリア選択を支援する大学別Webサービス、ビズリーチ・キャンパスのデザインリードを担当しました。

Bizreach Campus

BizReach BUNKA FEST 2018 Spring のWebサイトをデザイン・開発しました。WebGLを用いて過去のイベントの動画を多数の立方体で分割、スクロールに合わせて規則的に飛び回るモーションの実装で、お祭りの賑やかさを表現しました。  I designed and developed "BizReach BUNKA FEST 2018 Spring" Website. By using WebGL, a movie taken in the past event is divided with many cubes and moves by algorhythm. I expressed the bustle of the festival.  またVJ LSDとしてイベントにも出演し、VEDA JSを用いたライブGLSLコーディングのパフォーマンスを行いました。  Also I acted on the event as "VJ LSD" with live GLSL coding performance.

 Bunka Fest 2018 Spring

クリエイティブを軸にしたデジタルプロダクトの会社NoDE inc.の立ち上げメンバーになりました。  併せて、コーポレートサイトの情報アーキテクチャ設計・開発・モーショングラフィックス制作を担当しています。   『ノード』をイメージしたグラフィックが会社ロゴを形作り、2次元図形に変化します。その後、スクロールに合わせて回転するので実は3次元の球体であったことがわかります。サイトの上端・下端に到達すると球体が跳ねたり、リンクをタップすると膨張したりと、インタラクティブにノードが変化していきます。

NoDE inc.

iPad Pro向けのUIスケッチアプリ、Bluprintを制作しました。デザイン、実装、Webサイト制作等全ての制作を担当しました。    UIデザインを行う際に最もよく使われる、iPhone SEの実物大サイズがディスプレイに表示されるように調整しました。また、エクスポートするとiPhone SEの実解像度画像が書き出されるため、スケッチからビジュアルデザインへの工程がスムーズになります。    その他にも定規、ハサミ、アイコンのステンシルなど、スケッチをするにあたって必要なツールを盛り込んでいます。

Bluprint

手帳アプリLifebearのWebサイトを制作しました。デザインとフロントエンド実装を担当しています。TOPページでは特徴を「4の機能」「スタンプ」「ユニバーサル性」「有料プラン」の4つに整理し訴求を行いました。また、採用サイトも制作しました。

Lifebear

たった一本の直線が現在時刻を示す、シンプルな時計アプリWaveを制作しました。時間帯によって背景色が変わり、その時間の空気感を伝えてくれます。デジタル時計や目盛りを表示することもできます。さらにアラームの設定は、画面の端からスワイプして線を引くだけ。時間になればお気に入りの曲に合わせて直線が波形に変化し、曲によって全く異なるモーションを楽しむことができます。  本当に使える置き時計として主張しないデザインにすることや、画面をタップした時のインタラクションの気持ちよさに拘りました。また、ロゴとデジタル時計用のフォントを開発しました。

wave alarm clock

高知県の美容室Createur様のEnterページを作成しました。美容室のイメージを反映した、泡のようなモーションをデザイン・実装しました。

Creator

まるで本物のようなボディペインティングで話題になり、テレビ等メディアへの出演多数のアーティスト、チョーヒカルさんのWebサイトを制作しました。彼女自身がデザインしたロゴに合わせ、八角形をデザインの最小モジュールとしています。カルーセルスライドショーや、オリジナルキャラクターの「ページTOPへ戻る」など、彼女らしいユニークなサイトをデザイン/実装しました。また、CMSにはTumblrを使用し、彼女が元々抱えていた多数のフォロワーを活かしたままの運用が可能になっています。

hikarucho.com

筆文字書きのゆきさんのWebサイト『雪書』のネーミングと制作をしました。日本語ドメインや縦書きなど、筆文字らしさを表現しました。 <img src="https://images.microcms-assets.io/assets/52f06728542b42dda9cda2fc80fe7366/48e3b6495342424ea3fbc088f144e572/image.png" alt=""> <img src="https://images.microcms-assets.io/assets/52f06728542b42dda9cda2fc80fe7366/24ebf47b0463488f9389b2d27254bac5/image.jpeg" alt=""> <img src="https://images.microcms-assets.io/assets/52f06728542b42dda9cda2fc80fe7366/ce14ce8adb3543eeb138f75380b88a44/image.jpeg" alt="">

雪書

Mac専用のTwitterクライアント『夜フクロウ』のUIデザインとアイコンデザインを行いました。非常に高機能ながら、Twitter本体をメタファーとしたデザインにより誰でも直感的に使用出来るシンプルさを兼ね備えています。メイン機能をウインドウ上部に集約させることにより、ユーザーはほとんど目を動かさずに現在の状態を把握する事が出来ます。また余分な要素を徹底的に排除し、引き算のデザインにこだわりました。