minimal and modern Design solutionsミニマルでモダンなデザインシステムを開発しました

Responsive design for desktop and mobileレスポンシブ対応

Prototypingプロトタイピング実施

Smartphone Layoutsスマホ専用ページレイアウト

←

→

Azuma Shoukai Homepage吾妻商会ホームページリニューアル

Client: Azuma Shoukai株式会社 吾妻商会

scope: Web Designウェブデザイン

REVAMPED HOMEPAGE DESIGN FOR AZUMA SHOUKAI, A JAPANESE COMPANY SPECIALIZING IN INDUSTRIAL PRODUCTS IN THE FIELDS OF TRAFFIC SAFETY, CONSTRUCTION, AND INFRASTRUCTURE. THE GOAL WAS TO CREATE A MODERN DESIGN SYSTEM THAT NOT ONLY LOOKED GOOD, BUT ALSO ALLOWED FOR EASY AND INTUITIVE NAVIGATION OF THE HOMEPAGE'S MANY PAGES AND SECTIONS.

THE RENEWED DESIGN FEATURES A CLEAN, PROFESSIONAL AESTHETIC THAT IS USER-FRIENDLY AND PLEASING TO THE EYE. THE CONSISTENT USE OF WHITE SPACE CREATES A SENSE OF CLARITY AND MODERNITY, WHILE THE MUTED COLOR SCHEME WITH BLUE ACCENTS CONVEYS RELIABILITY AND PROFESSIONALISM. A CONSIDERED, MINIMAL LAYOUT ALLOWS THE EXTENSIVE INFORMATION TO BE DISPLAYED IN AN EASILY DIGESTIBLE, ORGANIZED MANNER.

OVERALL, THE REDESIGN STRIKES A BALANCE BETWEEN VISUAL APPEAL, FUNCTIONALITY, AND CORPORATE BRANDING, EFFECTIVELY COMMUNICATING AZUMA SHOUKAI’S CORE VALUES AND SERVICES IN A USER-FRIENDLY PACKAGE.

課題点
吾妻商会は交通安全、建設、インフラ分野の産業製品を専門とする日本企業であり、公式サイトはページ数や情報量が多く、複雑な構造となっていました。そのため、ユーザーが必要な情報に簡単にアクセスできる直感的なナビゲーションが求められていました。また、視覚的な魅力とプロフェッショナルなイメージを兼ね備えた現代的なビジュアルアイデンティティの構築が必要でした。

‍使用ツール
Adobe XD, Adobe Photoshop

‍取り組み
ウェブサイト全体のデザインシステムを再構築し、モダンで使いやすいレスポンシブに対応したホームページを設計しました。サイトデザインはAdobe XDで作成し、以下のポイントを重視しました：
‍
クリーンでプロフェッショナルなイメージの採用：余白や画像素材を効果的に活用し、明快さとモダンさを演出。

信頼性を伝える配色：落ち着いたカラースキームにブランドカラーのブルーをアクセントとして取り入れ、信頼性と専門性を表現。

情報整理とレイアウト設計：膨大な情報を整理し、最小限のレイアウトで視認性を向上させ、ユーザーが簡単に情報を取得できるデザインを追求。

‍実績・結果
リニューアルされたデザインにより、企業のコアバリューとサービスをわかりやすく伝える、視覚的に魅力的で機能的なレスポンシブサイトデザインが完成しました。ユーザーにとってより使いやすいサイトとなり、直感的なナビゲーションと統一したブランディングにより、企業の信頼性と専門性を効果的に発信することができました。

REVAMPED HOMEPAGE DESIGN FOR AZUMA SHOUKAI, A JAPANESE COMPANY SPECIALIZING IN INDUSTRIAL PRODUCTS IN THE FIELDS OF TRAFFIC SAFETY,  OF CLAAZUMA SHOUKAI’S CORE VALUES AND SERVICES IN A USER-FRIENDLY PACKAGE.

Artwork comprised of edited hi-res scans作品画像は複数の高精細画像で形成されています

Reconstructed and retouched works (select)画像合成/加工作業を担当した作品（抜粋）

hi-res image Close ups拡大された高精細画像

Hi-res image viewer on the gallery website紡ぐギャラリーサイトの高精細画像閲覧ページ

←

→

TSUMUGU GALLERY紡ぐギャラリー

Client: Yomiuri Shimbun株式会社 読売新聞

scope: Image Editing画像編集

RECONSTRUCTION AND RETOUCHING OF ULTRA HIGH RESOLUTION JAPANESE ARTWORK SCANS FOR TSUMUGU GALLERY, AN ONLINE GALLERY ORGANIZED BY LEADING JAPANESE NEWSPAPER YOMIURI SHIMBUN.

JAPANESE COMPANY CANON PROVIDED THE ARTWORK SCANS IN MULTIPLE SECTIONS. AS EACH SCANNED SECTION WAS SEVERAL GIGABYTES IN SIZE, A CUSTOM COMPUTER WAS BUILT TO MEET THE PERFORMANCE REQUIREMENTS FOR THE RETOUCHING PROCESS DONE IN ADOBE PHOTOSHOP.

ARTWORKS EDITED:
CHINESE JUNK AND NANBAN SHIPS - KANŌ TAKANOBU
PINE TREES - HASEGAWA TŌHAKU
LION - UNKNOWN ARTIST
WIND GOD AND THUNDER GOD - TAWARAYA SŌTATSU
PAPER BOX AND WRITING BOX WITH FIREFLIES OVER UJI RIVER - IIZUKA TŌYŌ
NINE-FIGURE SET OF AMIDA NYORAI STATUES - VARIOUS ARTISTS

概要
読売新聞のオンライン日本美術作品ギャラリー「紡ぐギャラリー」にて、超高解像度スキャンデータの再構成とレタッチを担当しました。スキャンデータはキヤノンに複数の断片画像に分割されており、それぞれの断片が数ギガバイトの容量を持つため、従来のマシンでは処理性能が不足していました。高精細なデータを正確かつ効率的に処理するための環境整備が必要でした。
‍
取り組み
データ処理を円滑に行うため、専用のカスタムマシンを用意し、Adobe Photoshopでレタッチ作業を実施しました。データの再構成においては、スキャンされた複数のセクションを一つの画像に統合し、細部にわたる色調整や補正を行い、作品の美しさを忠実に再現することに努めました。さらに、超高解像度データを扱う際のパフォーマンス最適化を実現するために、データ管理や処理ワークフローの効率化も並行して進めました。
‍
実績・結果
このプロジェクトにより、「紡ぐギャラリー」で公開される日本美術作品が、デジタル環境でも美しさを余すことなく鑑賞できる状態に仕上がりました。カスタムマシンの導入と最適なレタッチプロセスにより、スムーズなデータ処理が可能となり、高精度なデジタルギャラリーアーカイブの実現に成功しました。本プロジェクトは、ギャラリーのデジタル展示の品質向上に寄与し、多くの鑑賞者から高評価を得る結果となりました。

担当作品
‍狩野孝信筆　唐船・南蛮船図屏風
長谷川等伯筆　松林図屏風
唐獅子図俵屋宗達筆　風神雷神図屏風
初代飯塚桃葉　宇治川蛍蒔絵料紙箱・硯箱
阿弥陀如来坐像（九体阿弥陀）

REVAMPED HOMEPAGE DESIGN FOR AZUMA SHOUKAI, A JAPANESE COMPANY SPECIALIZING IN INDUSTRIAL PRODUCTS IN THE FIELDS OF TRAFFIC SAFETY,  OF CLAAZUMA SHOUKAI’S CORE VALUES AND SERVICES IN A USER-FRIENDLY PACKAGE.

Educational and Accessible design conceptアカデミックかつ使いやすいサイトデザインを構築

Responsive design for desktop and mobileレスポンシブ対応

Smartphone Page Designsスマホ専用サイトデザイン

versions based on feedback and researchフィードバックとリサーチに基づき、複数デザインを試作

←

→

JAPAN CLINICAL DERMATOLOGY SOCIETY HOMEPAGE皮膚臨床技術研究会ホームページリニューアル

Client: JAPAN CLINICAL DERMATOLOGY SOCIETY皮膚臨床技術研究会

scope: Web Design, frontendウェブデザイン、フロントエンド

HOMEPAGE REDESIGN FOR JSTCD (JAPAN SOCIETY FOR TECHNOLOGY IN CLINICAL DERMATOLOGY), AN ORGANIZATION DEDICATED TO RESEARCH AND PRACTICES RELATED TO DERMATOLOGICAL HEALTH, WITH A FOCUS ON IMPROVING SKIN CONDITIONS THROUGH NON-INVASIVE METHODS. THE MAIN OBJECTIVE WAS TO CREATE A RESPONSIVE WEBSITE WITH A CLEARER USER JOURNEY, PROVIDING A MORE USER-FRIENDLY EXPERIENCE CONSIDERING THE NUMEROUS PAGES AND SECTIONS WITH EXTENSIVE INFORMATION AND DATA.

THE NEW HOMEPAGE ADOPTS A REVISED DESIGN CONCEPT AND GUIDELINE, EMPLOYING A MINIMAL AESTHETIC AND COLOR PALETTE WHICH SIMPLIFIES NAVIGATION WHILE SIMULTANEOUSLY CONVEYING HEALTH, ACCESSIBLE EXPERTISE, AND RELIABILITY. EXISTING PAGE SECTIONS, ADDITIONALLY, ELEMENTS AND MENU SYSTEMS HAVE BEEN RECONSIDERED, MODIFYING OR REMOVING THEM ENTIRELY FOR A MORE INTUITIVE USER EXPERIENCE. NEW COMPONENTS HAVE ALSO BEEN ADDED TO IMPROVE THE USER JOURNEY THROUGHOUT THE WEBSITE.

THE REDESIGN PROVIDES A MORE EFFICIENT AND EFFECTIVE LAYOUT AND SYSTEM, ENHANCING THE USER EXPERIENCE AND JOURNEY. THE NEWLY RESPONSIVE WEBSITE HAS IMPROVED ACCESSIBILITY ACROSS DEVICES, ALLOWING USERS TO ACCESS IMPORTANT HEALTH INFORMATION ANYWHERE, ANYTIME.

意図・目的
見た目の美しさだけでなく、膨大な情報量を直感的にナビゲートできる設計を開発しました。ユーザーが迷わず求めている情報にたどり着けるように、モダンで整理されたデザインシステムを構築し、研究会の信頼性と専門性を表現することが目的でした。

使用ツール
Figma, Adobe Photoshop, Visual Studio Code, Github

業務内容・取り組み
デザインコンセプト策定：クリーンでアカデミックな美しさを重視し、余白を効果的に活用したデザインを提案。

カラー設計：ホワイトのベースに落ち着いたカラーパレットを加え、信頼性、健康性、安全性などを表現。

レイアウト設計：シンプルかつ計算されたミニマルなレイアウトを採用し、情報をわかりやすく表示。

ユーザビリティ向上：直感的な操作性を重視し、ユーザージャーニー全体を考慮したナビゲーション構造やページ動線を採用。レスポンシブデザインも採用し、様々な画面サイズにも対応。

結果・実績
ユーザーが迷うことなく目的の情報へたどり着ける効率的なナビゲーションを実現。視覚的な明瞭さと操作性の向上により、研究会の専門性や信頼性を効果的に表現。明確で整理された情報設計により、サイト訪問者の離脱率が低減し、情報へのアクセス性が改善。

REVAMPED HOMEPAGE DESIGN FOR AZUMA SHOUKAI, A JAPANESE COMPANY SPECIALIZING IN INDUSTRIAL PRODUCTS IN THE FIELDS OF TRAFFIC SAFETY,  OF CLAAZUMA SHOUKAI’S CORE VALUES AND SERVICES IN A USER-FRIENDLY PACKAGE.

The Pixel 6 Demo Includes a custom menuPixel 6カメラ機能再現デモ+専用メニューを実装

Menu, AI Camera, Google Lens, Magic Eraserメニュー、AIカメラ、Googleレンズ、消しゴムマジック

The Demo was also accessible onlinePixel 6デモはオンラインでもアクセス可能（期間限定）

←

→

GOOGLE PIXEL 6 CAMERA DEMOGOOGLE PIXEL 6カメラ機能デモ

Client: GOOGLE JAPAN, HAKUHODO INC.グーグル合同会社、株式会社 博報堂

scope: UI/UX Design, Image/Video EditngUI/UXデザイン、画像/動画編集

INTERACTIVE ONLINE AND IN-STORE DEMO SHOWCASING THE PIXEL 6'S CAMERA FEATURES (PORTRAIT (AI Camera), IMAGE RECOGNITION, MAGIC ERASER) AHEAD OF THE DEVICE'S LAUNCH. THE DEMO CONSISTED OF BOTH CLICKABLE INTERFACE ELEMENTS (E.G. CAMERA BUTTON, MAIN MENU) AND SCREEN RECORDINGS OF THE CAMERA FEATURES IN ACTION.

WORKING ALONGSIDE TECHNICAL DIRECTORS, AN INTERFACE CLOSELY EMULATING THAT OF THE PIXEL 6 WAS CREATED, WITH SPECIFIC COMPONENTS ACTING AS A TRIGGER FOR THE RECORDINGS TO PLAY.

THE DEMO WAS ACCESSIBLE FOR A LIMITED TIME VIA IN-STORE DISPLAY DEVICES AND THE OFFICIAL PIXEL 6 Website.

意図・目的
Pixel 6 の主要カメラ機能（AIカメラ、Googleレンズ、消しゴムマジック）を紹介し、ユーザーがカメラのインターフェースと機能を疑似体験できるインタラクティブデモの構築に携わりました。

‍使用ツール
Adobe XD, Adobe Photoshop, Adobe Illustrator, Adobe After Effects

取り組み
デモの設計：クライアントと協議の上、各カメラ機能のハイライトさせたい要素（例：処理速度、画像認識精度）を定める。デモ専用メニューをデザインし、各機能へのナビゲーションシステムを設計。
‍
インターフェースと機能の再現：Pixel 6 のカメラ画面を模倣したコンポーネントシステムを作成。機能の動作映像 (Google Japan提供) を編集し、エンジニアと連携しつつUI要素と連動させ、インタラクティブ要素を実現。
‍
結果・実績
Pixel 6 カメラインターフェースを忠実に再現したデモにより、顧客の製品理解を促進し、購買意欲を向上。オンラインでのデモ配信により、店舗に来られないユーザーにも体験が可能となり、製品認知度を拡大。

REVAMPED HOMEPAGE DESIGN FOR AZUMA SHOUKAI, A JAPANESE COMPANY SPECIALIZING IN INDUSTRIAL PRODUCTS IN THE FIELDS OF TRAFFIC SAFETY,  OF CLAAZUMA SHOUKAI’S CORE VALUES AND SERVICES IN A USER-FRIENDLY PACKAGE.

Users join meetings as an avatar入室時にアバターを選択

Anonymous comment system匿名コメント機能

Avatars are controllable via keyboardアバターはキーボードで操作可能

video Storyboard and stylesheet動画撮影用絵コンテ＋スタイルシート

Several seasonal Themes were created複数の季節限定テーマを制作しました

←

→

EMO+ (HPE ver.)

Client: HEWLETT PACKARD ENTERPRISE (HPE) JAPAN日本ヒューレット・パッカード合同会社

scope: Concept design, Graphic Design, UI/UX Design, Storyboarding, Video Direction, Image/Video Editngコンセプトデザイン、グラフィックデザイン、UI/UXデザイン、撮影絵コンテ作成、撮影ディレクション、画像/動画編集

CUSTOMIZED VERSION OF EMO+ FOR HEWLETT PACKARD ENTERPRISE JAPAN, BUILT TO ASSIST HPE EMPLOYEES IN THE ONBOARDING PROCESS, AS WELL AS ENCOURAGE COMMUNICATION AMONG EXISTING EMPLOYEES DURING THE ONSET OF THE CORONAVIRUS PANDEMIC.

SIMILAR TO THE ORIGINAL, THE HPE VERSION FEATURES CONTROLLABLE AVATARS WITH REACTION FUNCTIONALITIES, CUSTOM THEMES, AND AN ANONYMOUS COMMENTING SYSTEM.

概要・目的
社内Zoom拡張ツール「Emo+」(エモタス）をカスタマイズし、新入社員のオンボーディング支援と社員間コミュニケーション促進を目的に開発。コロナウイルス感染拡大に伴い、リモート環境での業務が中心となる中、新入社員のスムーズなオンボーディングを支援するとともに、社員間のコミュニケーションを活性化することを目的としました。特に、形式的な雰囲気や上下関係の壁を取り払い、リモート会議をより親しみやすく、インタラクティブにする仕組みを提供することを目指しました。
‍
使用ツール
Adobe Photoshop, Adobe Illustrator, Adobe After Effects

業務内容・取り組み
コンセプトの策定: HPE Japanのブランドガイドラインに沿ったコンセプトとUIデザインを作成。
機能開発: Emo+ (オリジナル版)同様、操作可能なアバター、リアクション機能、カスタムテーマ、匿名コメント機能を導入。
ユーザーサポート: 初回利用者向けの操作説明動画を撮影＋編集。

結果・実績
オンライン会議に楽しさとインタラクティブ性を加えることで、社員同士のコミュニケーションが活性化。
クライアントから高く評価され、リモート環境での業務効率の向上に貢献。

REVAMPED HOMEPAGE DESIGN FOR AZUMA SHOUKAI, A JAPANESE COMPANY SPECIALIZING IN INDUSTRIAL PRODUCTS IN THE FIELDS OF TRAFFIC SAFETY,  OF CLAAZUMA SHOUKAI’S CORE VALUES AND SERVICES IN A USER-FRIENDLY PACKAGE.

Users join meetings as an avatar入室時にアバターを選択

Anonymous comment system匿名コメント機能

Avatars are able to "react"アバターでいいねを投げることが可能

Emotus Design Guidelinesエモタス専用デザインガイドライン

Support page for emotus usersエモタス専用サポートページ

←

→

EMO+ (Original Ver.)

IN-HOUSE PRODUCT自社プロダクト

scope: Concept design, Graphic Design, Branding, UI/UX Design, Image/Video Editngコンセプトデザイン、グラフィックデザイン、ブランディング、UI/UXデザイン、画像/動画編集

CONCEIVED DURING THE COVID-19 PANDEMIC, EMO+ (PRONOUNCED EMOTUS) IS A ZOOM EXTENSION AIMING TO MAKE ONLINE MEETINGS MORE APPROACHABLE AND INTERACTIVE.

EMO+ FEATURES CONTROLLABLE AVATARS, REACTIONS, AN ANONYMOUS COMMENT SYSTEM, AND MORE.

目的
2019年の新型コロナウイルス感染症の流行に伴い、リモートワークが普及する中で、オフィス内外での効果的なコミュニケーションを維持することが急務となりました。この課題を解決するため、自分を含むチームでZoomの拡張機能「Emo+」(エモタス）を開発しました。

使用ツール
Adobe Photoshop, Adobe Illustrator, Adobe After Effects
‍
取り組み
ユーザーがEmo+の会議室に参加する際にはキーボードで操作可能なアバターを選択することができます。また、匿名コメントシステムを導入することで、参加者が積極的に会話や議論に参加しやすい環境を用意しました。主催者は会議室の外観を一新できる複数のビジュアルテーマを実装しました。私はインターフェースデザインおよびアバターデザインを担当しました。インターフェースは画面を混雑させないよう、ミニマルで直感的なレイアウトを採用し、アバターには明るい、アニメ風の画風を考案しました。また、初めてのユーザー向けと営業向けに、Emo+のプロモーション動画も制作しました。

REVAMPED HOMEPAGE DESIGN FOR AZUMA SHOUKAI, A JAPANESE COMPANY SPECIALIZING IN INDUSTRIAL PRODUCTS IN THE FIELDS OF TRAFFIC SAFETY,  OF CLAAZUMA SHOUKAI’S CORE VALUES AND SERVICES IN A USER-FRIENDLY PACKAGE.

First-aid Manual App Designed with Figma マニュアルアプリデザインはFigmaで作成

Home Menu, Chapter listホーム、チャプター画面

Manual, Quizマニュアル、クイズ画面

←

→

RUGBY FIRST-AID MANUAL APPラグビー外傷・障害対応マニュアルアプリ

Client: JAPAN RUGBY FOOTBALL UNION (JRFU)日本ラグビーフットボール協会

scope: App Designアプリデザイン

APPLICATION DESIGN FOR JAPAN RUGBY FOOTBALL UNION'S FIRST-AID MANUAL. SPECIAL ATTENTION WAS GIVEN TO THE MINIMAL LAYOUT AND TYPOGRAPHY USED, AS THE MANUAL REQUIRED ITS EXTENSIVE INFORMATION AND DIAGRAMS TO BE DISCERNIBLE AND EASILY LEGIBLE.

THE APP INCLUDES AN UPDATED MANUAL DIVIDED INTO CHAPTERS, BOOKMARKING AND KEYWORD SEARCH FUNCTIONALITIES, AND A QUIZ FEATURE TO TEST USERS AFTER THEY HAVE GONE THROUGH THE MANUAL.

概要・課題点
日本ラグビーフットボール協会の外傷・障害対応マニュアルアプリのデザインを担当しました。本プロジェクトの課題は、膨大な情報と図解を効率的に整理し、読みやすく分かりやすい形で提供することでした。そのため、ミニマルなレイアウトとタイポグラフィを重視し、視認性と利便性の向上を図りました。

‍使用ツール
Figma, Adobe Photoshop

取り組み
アプリには、最新のマニュアルを章ごとに分割し、情報へのアクセスを容易にする設計を採用しました。また、ユーザーの利便性を考慮し、ブックマーク機能やキーワード検索機能を搭載しました。さらに、学習効果を高めるために、クイズ機能も追加しました。これらの機能設計においては、ユーザーエクスペリエンスの向上を最優先に考え、シンプルで分かりやすいインターフェースを採用しました。

‍実績・結果
アプリは、分かりやすい情報整理と直感的な操作性により、ユーザーから高評価を得ました。特に、情報の検索性やクイズ機能は多くのユーザーから有用であると評価され、マニュアルの理解促進に貢献しました。

REVAMPED HOMEPAGE DESIGN FOR AZUMA SHOUKAI, A JAPANESE COMPANY SPECIALIZING IN INDUSTRIAL PRODUCTS IN THE FIELDS OF TRAFFIC SAFETY,  OF CLAAZUMA SHOUKAI’S CORE VALUES AND SERVICES IN A USER-FRIENDLY PACKAGE.

From left: Sprinkles, Toucans, Flamingos, Pineapple左から：スプリンクルトッピング、オオハシ、フラミンゴ、パイナップル

STRIDE RITE: TROPICALIA

Client: VIDA SHOES INTERNATIONAL

scope: Image/Video Editing画像/動画編集

SERIES OF SOCIAL MEDIA ANIMATIONS PROMOTING THE LAUNCH OF THE STRIDE RITE CHILDRENS' SHOE BRAND'S TROPICALIA COLLECTION.

THE GIFS ASSOCIATE THE SHOES WITH THE POWER AND FUN OF CHILDLIKE IMAGINATION BY BRINGING ITS PRINTS AND PATTERNS TO LIFE. THE ANIMATIONS HAVE CONTRIBUTED TO THE BRAND'S GROWTH AND PRESENCE ON SOCIAL MEDIA.

プロジェクト概要
ニューヨークの子ども用シューズブランドStride Rite（ストライドライト）のTropicaliaコレクションのローンチに向けて、SNS用アニメーションシリーズを制作しました。課題点コレクションの特長である子どもらしい想像力や楽しさを表すデザインやプリントの魅力を効果的に伝えながら、ブランドの成長とSNSでの認知度向上を目指しました。
‍
‍使用ツール
Adobe Photoshop, Adobe After Effects
‍
取り組み
シューズのプリントやパターンが「生きている」かのようなアニメーションGIFを制作。子どもらしい無邪気さや想像力を表現する動きを取り入れ、ブランドのイメージを視覚的に強化。SNS投稿に適したフォーマットでデザインからアニメーション制作までの全工程を担当。

実績・結果
制作したアニメーションは、ブランドのSNSフォロワー数とエンゲージメント向上に貢献。コレクションの注目度を高め、ブランドプレゼンス拡大に貢献。

REVAMPED HOMEPAGE DESIGN FOR AZUMA SHOUKAI, A JAPANESE COMPANY SPECIALIZING IN INDUSTRIAL PRODUCTS IN THE FIELDS OF TRAFFIC SAFETY,  OF CLAAZUMA SHOUKAI’S CORE VALUES AND SERVICES IN A USER-FRIENDLY PACKAGE.