2021年7月27日

デザイン

palanDXのロゴとデザインの作成過程を紹介!

palanDXのロゴとデザインの作成過程を紹介!palanDXのロゴとデザインの作成過程を紹介!

目次

  1. はじめに
  2. ロゴ作成の過程
  3. デザイン作成
  4. デザインの変遷
  5. まとめ

はじめに

bageleeの運営会社であるpalanでは、スピードのあるデザインとシステム開発を提供しているpalanDXというサービスがあります。
先日そのpalanDXというサービスのロゴを作成し、それに伴ってサイト全体をリニューアルしました!

今回は、ロゴの作成過程とそれに合わせたサイトのデザインの目的やリニューアルの際に意識したことをご紹介します!

top.png (612.1 kB)

ロゴ作成の過程

lastlogo.png (6.7 kB)

最終的なロゴがこちらです!

DXをモチーフに半円を2つ使うことで既存のものを新しく改善する様子を現しています。また、丸みをもたせることで寄り添う親密さが出るように、シンプルな造形にすることでモダンなロゴになるように意識しました。

ここからは、ロゴの作成手順について詳しく紹介します!大きく3つのステップを踏みました。

コンセプトを定義

まずは、サービスの利用者が求めていることについて、サービス内容と全体の視点から考えます。
palanDXは、DX支援とDXソリューションの2つのサービスがあるため、全部で3つの視点から利用者が求めていることをそれぞれ定義しました。

次に、palanDXの想いと利用者が求めていることを元に、キーコンセプトとキーワードを決めていきます。

image.png (360.3 kB)

今回のキーコンセプトは、
「プロダクト開発業界の未来を創る」「誠実な姿勢でDXに取り組む」「スピーディな開発で事業を実現する」の3つを掲げることにしました。

キーワードは、「業界の未来を創る」「スピーディな開発」「誠実に寄り添う」を設定し、それぞれから関連する単語を3つほどリストアップします。

他社調査

続いて、ベンチマーク企業のロゴの調査を行います。
x軸とy軸を決めて、印象を分類します。今回は「伝統とモダン」「丸みとシャープ」の2軸で10社ほど調査しました。

調査の中で、自分たちのロゴがどこのポジションを目指すのかが定まったらいよいよ作成に移ります!

ロゴ案を作成する

image.png (257.8 kB)

最初は色んなアイデアを書き出し、何パターンかロゴを作成しました。
先に決めていたコンセプトに沿って、キーワードである「スピーディーさ」「プロダクト作りの未来」「DX」などから連想したモチーフを組み合わせていきます。

モチーフが決まったらフォントと組み合わせて全体的なバランスを調節します。

palanDXはpalanの事業部の一つという位置付けなので、フォントはpalanでも使われているものをベースにしました。

logo.png (2.2 MB)

最終的に元のサイトの雰囲気に合わせたパターンと、合わせずロゴを優先させたパターンの2つを作成しました。
それぞれのロゴに合わせてメインビジュアルを何パターンか作成し、実際にどんなサイトの雰囲気になるのかが分かりやすいような形で提案します。

フィードバックでは、下の案の方がワクワクする、palanDXが目指す未来に近いのではないかという意見を頂きました。

事前に決めていたサイトの情緒キーワードとして、誠実だけでなくワクワク感も設定していたので下の案でロゴを決定し、サイトのリニューアルに着手しました!

デザイン作成

今回は文言や全体の構成の変更はなかったため、元のサイトをワイヤーとしてあしらいなどを作成しました。

image.png (1.0 MB)

個人的にメインビジュアルの作成が特に難しく、複数のパターンを作成してデザインチームの方と週に1度行う共有会で相談しながら進めていきました。

共有会では、相談した部分についてみんなでデザインを作成して比較することができたり、アイデアを頂けたりするのでとても重宝しています!

middle.png (2.0 MB)

途中案と最終案の比較です。
フィードバックで頂いたあしらいの工夫や余白を改善して、最終案ができました!

ロゴに合わせてふたつのモチーフや丸み、半円などを用いたデザインにしています。

ロゴに使用した2色をサイト内で使い、ワクワクするような可愛らしさを表現しつつ、レイアウトで誠実さが伝わるように余白や整列を意識しました。

デザインの変遷

history.png (1.8 MB)

最終的なリニューアル前と後のデザインの変遷です。
内容は同じものの、サイトを見た時に感じる雰囲気は異なるものになったのではないかなと思います!

palanDXのサイトはノーコードツールであるSTUDIOで作成しています。
STUDIOの直感的なGUIのおかげでスムーズに、デザインのリニューアルをすることができました!

レスポンシブ化もある程度はSTUDIO側でやってくれるので、自分で調整する部分は少しになりとても便利です。

STUDIOで作成されたサイトギャラリーであるSTUDIO Showcaseにも掲載していただいたので他のサイトと合わせて見ていただけたらと思います!

まとめ

palanDXのサイトリニューアルについて紹介しました!
ロゴやデザイン作成について、参考になる部分があれば嬉しいです。

今回新しく作成したデザインに合わせて、これからもっとコンテンツを充実させていく予定なので、引き続き分かりやすくてワクワクするようなデザインを作成していきます!

palanDXのサイトはこちら

Figmaのお仕事に関するご相談

Bageleeの運営会社、palanではFigmaに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

0

0

AUTHOR

かっきー

かっきー

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にpalan(旧eishis)を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画・マークアップ・開発をやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

かっきー

かっきー

まりな

まりな

suzuki

suzuki

taro

taro

xR界隈のビズをやっています。新しいガジェットとか使うのが好きです。あとお寿司は玉子のお寿司が好きです。

miyagi

ogawa

ogawa

雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。

いわもと

いわもと

kobari

taishi kobari

フロントエンドの開発を主に担当してます。Blitz.js好きです。

shogokubota

kubota shogo

サーバーサイドエンジニア。Ruby on Railsを使った開発を行いつつ月500kmほど走っています!

nishi tomoya

CONTACT PAGE TOP