当社では、10年以上にわたりWordpressを愛用し続けていましたが、ヘッドレスアーキテクチャを導入する時期として、今がその好機だと判断しました。ヘッドレスについて詳しくお知りになりたい方は、こちらの記事をご参照ください。

ヘッドレスを導入した目的としては2つあります。まず、当社のウェブサイトをヘッドレスへ移行することで、ヘッドレスから得られるメリットを享受することです。もう一つが、その移行過程において、数値化できるような分析指標を確立することで、当社クライアントのヘッドレス化を指導・実行しやすくすることです。

この記事では、ヘッドレスへの移行前と移行後の違いを比較した結果とインサイトを紹介していきます。まずは、移行に至った背景について説明します。

過剰編集で動作が重いWordpressから…

10年以上にわたり、当社のウェブサイトやオンラインポートフォリオは、Wordpressで構築されていました。この10年のうちに、2度のサイト再設計を行い、プリビルド機能およびフルカスタマイズ機能はすべて体験し尽くした感があり、新たな最新テクノロジーの台頭と共に、Wordpressの可能性と限界を十分に理解していました。

当社の開発チームは、時代遅れのPHPベースのアーキテクチャや、Wordpressやサードパーティプラグインに依存した開発環境に限界を感じており、一方で当社のマーケティングチームも、動作が重いWordpressは当社のウェブサイトに適さないと感じ始めていました。

そして、これが最も重要なことかもしれませんが、Wordpressや類似のCMSによるサイトパフォーマンスの低さと、Googleアルゴリズムに沿ったサイト構築の重要性の高まりを受け、ヘッドレス化に対応ぜざるを得ないという結論に至りました。

当社にとって、ヘッドレスへ移行することは避けられない大変革であり、Wordpressと別離するタイミングでもありました。

…超高速なヘッドレスアーキテクチャへ

ヘッドレス化を進める原動力として、まずは開発チームに技術スタックの選定を一任しました。

当社の新ウェブサイトはVercelで構築されており、ヘッドレスCMSソリューションとしてPrismicを、フロントエンド開発ツールとしてReactを使用しています。厳選された最新スタックのおかげで、モノリシックアーキテクチャ時代の従来スタックとは比べ物にならないくらいの開発効率の向上を実現できました。また、適切な開発環境を整備できたことで、テストフェーズも容易に進めることができました。

技術面でのもう一つのメリットとして、ヘッドレス化によって、ウェブサイトのセキュリティを複数レイヤーに分割することや、委譲が可能になったことが挙げられます。つまり、データベースへのエントリポイントが複数のサービスにまたがるため、各サービスのセキュリティシステムによって保護されることで、サイト自体が悪意を持った攻撃に対して強くなるという利点が得られたのです。

さらに、PrismicのようなヘッドレスCMSを利用することで、フロントエンドの構築やコンテンツブロックの作成、カスタマイズ機能の拡張を希望通りに行うことができました。CMSバックエンドは、シンプルで直感的なインターフェイスを採用しているため、以前よりも管理が容易になりました。

期待していた通り、ヘッドレス化によって得られた最大のメリットは、ウェブサイトパフォーマンスの向上でした。Google Lighthouseスコアは30ポイント、SEOパフォーマンススコアは10ポイントも改善させることができました。

さらに、ウェブサイトをPWAに対応させることで、CREAMのウェブサイトをモバイルデバイス上にインストールすることで、ネイティブアプリと同じように操作ができる機能も実現しました。
 企業ウェブサイトにとっては、あまり影響がないかもしれませんが、PWA対応することで様々なメリットを得られるウェブサイトにとっては、これは大きな違いを生み出します。たとえば、ECサイトをPWAとしてインストールしておくことで、オフラインでもコンテンツを読み込むことができ、顧客が時間や場所を選ばずに商品をスムーズに購入できるような豊かな購買経験を提供できるようになります。

ヘッドレスに移行したことで、当社のウェブサイトは、パフォーマンスの向上と豊かなEC体験の提供という両面で大きく改善したと言えるでしょう。移行から得られたメリットは期待通りのものでした。ヘッドレス化に対してお悩みの方に、この情報がお役に立てば幸いです。すでに移行を決心された方も、まだお悩みの方も、ぜひ一度CREAMにご相談ください。

ヘッドレスへの移行から得られたメリット：当社CREAMのウェブサイトのヘッドレス化を通して得られた目に見えるメリットを解説する。

ヘッドレスへの移行から得られたメリット：当社CREAMのウェブサイトのヘッドレス化を通して得られた目に見えるメリットを解説する。当社では、10年以上にわたりWordpressを愛用し続けていましたが、ヘッドレスアーキテクチャを導入する時期として、今がその好機だと判断しました。ヘッドレスについて詳しくお知りになりたい方は、こちらの記事をご参照ください。

WordPressからヘッドレスへ：ビフォーアフター徹底比較  | ブログ | CREAMデジタルスタジオ

WordPressからヘッドレスへ：ビフォーアフター徹底比較

ここ数年のデジタルマーケティング界隈では、「ヘッドレス」という言葉が広く使われるようになりました。しかし、実際のところ、その言葉が真に意味するところは明確にされていません。

現在、ヘッドレスは新たな必須要件として徐々に存在感を増してきており、業界のエキスパートにとっても無視できないものとなりつつあります。開発から設計、ウェブ販売や管理まで、ヘッドレスによる恩恵が受けられる分野は様々です。

この記事では、ヘッドレスの基礎知識を掘り下げることで、その可能性について探っていきます。

「ヘッドレス」ソリューションとは

ウェブソリューションのフロントエンド（頭）をバックエンド（胴体）から切り離した考え方をヘッドレスと呼びます。ヘッドレスは、フロントエンドのスタックを分離することで、従来のCMSやECソリューションのスタックや構造体から独立させることを目的としています。

ヘッドレス環境においては、CMSやECソリューションの枠組みにとらわれずに、さまざまなテクノロジーを活用して、フロント部分の設計や開発、拡張、保守を自由に行うことが可能になります。そのため、動作が重いテーマや特定のプログラミング言語、時代遅れのアーキテクチャに依存する必要がなくなるというメリットがあります。

どのようなヘッドレスソリューションであれ、根幹にはバックオフィスを持ち、そこでコンテンツの作成や管理を行います。これらのコンテンツをAPI経由でクラウドから取得することで、独立したフロントエンドに反映することが可能になります。コンテンツは、処理が重いモノリシックアーキテクチャではなく、クラウド上に保存されるため、速度性能の改善が期待できます。

ヘッドレスアーキテクチャは、バックエンドとフロントエンドの開発を別々に行うことを可能にし、相互影響を最小限に抑えることで、円滑な開発フローや長期的に保守が容易になるシステムを実現します。

ヘッドレスのメリット1：構築と拡張の自由度の高さ

従来型のCMSウェブサイトは、フロントエンドとバックエンドがひとつながりで、一体となって設計されています。一方、ヘッドレスソリューションでは、フロントエンドとバックエンドを切り離すことで、互いの動作に影響を及ぼすことなく、それぞれのレイヤーを独立して管理・保守することが可能になります。

モノリシックソリューションも、特定の技術スタックに依存しています。たとえば、Wordpressでウェブサイトを構築する際にはPHPを使用せざるを得ませんし、Shopifyのフロント部分を構築する際には、RubyをベースとしたLiquidという独自言語を使用する必要があります。サードパーティのプラグインやテーマを使用してウェブサイトのカスタマイズや改良を行うときにも、同様のことが言えます。

ヘッドレスアーキテクチャの分離の特性により、フロントエンドの開発に必要なプログラミング言語を自由に選べるだけでなく、バックエンドで動かすサービス（CDN、フレームワーク、CMS、ECプラットフォーム、サードパーティアプリなど）も自由に選択できるようになります。ヘッドレスアーキテクチャは言語に依存しないため、採用できるテクノロジーの幅が広いほか、さまざまなニーズに対応した最適かつ最新のスタックを実装できます。この柔軟性が、より拡張性が高く、スマート機能との互換性が高いウェブサイトの実現につながります。

総括すると、従来型のCMSや汎用的なソリューションは、セットアップや導入が早く、容易かつ安価である一方で、アップデートや保守に関して柔軟性に欠けるという点は、変化するビジネス環境においては大きな課題になり得ます。

ヘッドレスソリューションは、個々のレイヤーのセットアップや接続に技術的な労力や時間はかかるものの、長期的に持続できるウェブサイトを実装できます。自社のニーズや要件を満たしたウェブサイトを構築し、アップデートや保守にかかる労力を減らせることが、ヘッドレスの魅力の一つです。

ヘッドレスのメリット2：パフォーマンスの向上とPWA対応

ヘッドレスアーキテクチャを支持する意見の一つに、ウェブサイトのスピードとパフォーマンスの向上が挙げられています。

固定のスタックで構成されているモノリシックソリューションは、複数チャネルでの利用に適していないことがほとんどです。たとえば、汎用型ECソリューションの多くは、携帯電話で最適な性能を発揮するようには設計されていません。画像の重さやサードパーティシステムへのコールの多さによってページを読み込む速度が遅くなると、サイト訪問者がチェックアウトプロセスの最後まで行き着く前に離脱してしまう可能性が高くなります。

ヘッドレスを導入することで、ウェブサイトに最新のテクノロジーを搭載できるほか、独立したフロントエンドインターフェイスは、さまざまなチャネルでのコンテンツの最適表示を実現します。デスクトップからモバイルデバイス、スマートウォッチに至るまで、一つのバックエンドで複数のフロントエンドを管理することが可能になります。

ヘッドレスを導入したウェブサイトは、PWAに対応させることができます。つまり、どのようなモバイルデバイス上でも、ネイティブアプリと同様に動作することを可能にします。PWAはコンテンツをキャッシュすることで、インターネットの接続速度が遅い場合でも、ページの読み込み速度を向上させることができます。サイトへの訪問者や顧客に対して、使用するデバイスに関わらず、クロスプラットフォームで合理化されたブランド体験を提供できるようになります。

ヘッドレスのメリット3：豊かなEC体験の提供とコンバージョン率の向上

フロントエンドとバックエンドを分離することで、より豊富なマーチャンダイジング機能を実装できるようになり、ECビジネスを一段回上のレベルへと引き上げることが可能になります。多市場展開しているグローバルECサイトを例に挙げると、言語や通貨を変更しただけの似たようなフロントエンドではなく、各市場に最適なローカライゼーションを実現することができます。

ヘッドレスECサイトをPWA対応させることでも、チェックアウトプロセスの軽量化やページ読み込み速度の向上が期待でき、顧客に対して、デバイスや接続環境を選ばないスムーズなEC体験を提供できます。

さらに運用レベルの話をすると、ヘッドレスアーキテクチャでは、データレイヤーを譲渡できるため、運用や管理をエキスパートに任せることができるという強みがあります。たとえば、当社のパートナーでもあるOcctooは、バックエンドとフロントエンドのコミュニケーションの効率化を図るために、PIMやOMS、CRMレイヤーと連携できるリアルタイムAPIを提供しています。

ニーズや売上規模、開発チームの規模にもよりますが、Salesforce Commerce CloudやBigCommerce、Shopifyなど、ほとんどの最新型ECソリューションがヘッドレスに対応しています。たとえば、Shopifyにヘッドレスを導入することで、フロントエンドの構築に必要なRubyベースのLiquidに依存することなく、ECのバックエンドソリューションとしてのShopifyの機能をフル活用することが可能になります。

ヘッドレスコマースの導入をより現実的に進めるためには、当社のパートナー企業であるShogun Frontendに依頼することをおすすめします。Shogun FrontendはRich Frontend Experienceと称するCMSをはじめ、さまざまなフロントエンドの機能をパッケージ化して提供しており、ゼロから構築する場合に比べて、よりアクセシブルかつ効率的なヘッドレスECサイトの実現をサポートしています。

以下の特徴を持つウェブサイトやECストアを運営している方には、ヘッドレスの導入をおすすめします。

モノリシック環境におけるさまざまな制限を取り払った自由なサイト構築のために、最新型ソリューションやテクノロジーの可能性を最大限に活用することで、大幅なカスタマイズや豊富なマーチャンダイジング機能を必要としている

大量のトラフィックや高い売上を獲得しており、パフォーマンスの最大化によるコンバージョン率の向上を通してさらなる売上アップを目指している

多市場展開をしていることから、真の意味でのローカライゼーションを必要としている（ヘッドレスを導入することで、多言語や多通貨対応、各市場に適した機能やコンテンツの作成が容易になるため）

モバイルデバイスからのアクセスが主流である（ヘッドレスの導入によって、ウェブサイトをPWA対応させることで、モバイルデバイス上でもネイティブアプリと同じような動作が可能になるため）

ヘッドレスを導入すべきかお悩みの方は、CREAMにご相談ください。当社のエキスパートが、この新しいテクノロジーのより詳しい情報や可能性について、丁寧にご説明いたします。

デジタルソリューション開発の新潮流「ヘッドレス」についての基礎知識を深め、その可能性について探る。

デジタルソリューション開発の新潮流「ヘッドレス」についての基礎知識を深め、その可能性について探る。ここ数年のデジタルマーケティング界隈では、「ヘッドレス」という言葉が広く使われるようになりました。しかし、実際のところ、その言葉が真に意味するところは明確にされていません。

ヘッドレスとは? 主なメリットと導入対象 | ブログ | CREAMデジタルスタジオ

ヘッドレスとは? 主なメリットと導入対象

最適なECプラットフォームを選ぶためには、プランや機能、システム連携など、さまざまな要素を検討しなければなりません。

Shopifyは、専門的な開発スキルがなくても簡単にオンラインストアを開設できるECプラットフォームですが、現実はそう簡単にはいかないものです。Shopifyにはさまざまなプランが用意されており、通常版よりも多くの機能を備えたShopify Plusも提供しています。2つの違いは主に技術面にありますが、どちらがご自身のビジネスにより適しているのか判断に迷う方も多いのではないでしょうか。

そこで今回は、ShopifyとShopify Plusの違いについて説明しながら、どちらを選ぶのがベストなのか、選択基準をご紹介いたします。

ビジネスの規模はどのくらいか

売上規模と訪問者数から考える

ShopifyとShopify Plusのどちらかで迷ったら、まずはご自身のビジネスの規模に合った方を選びましょう。

Shopifyの通常プランは「ベーシック」「スタンダード」「プレミアム」に分かれており、オンラインストアの種類や規模によってプランを選択できます。中小規模のビジネスに適しており、規模によって月額29ドルから299ドルまで料金設定が異なります。

通常プランの拡張版として提供されているのがShopify Plusで、価格や機能も大企業向けの内容となっています。

Shopify Plusは、月間売上高が80万ドル未満の場合は月額2,000ドル、80万ドルを超える場合は月間売上高の0.25％と、かなり高額な料金設定になっています。小規模ビジネスの場合は、まずはお手頃な通常プランからご利用いただく場合が多いですが、Shopify Plusには通常版にはないさまざまなメリットが付いています。

通常プランでは、スタッフアカウントを2個から15個まで作成することが可能です。それで足りなければ、Shopify Plusにアップグレードすることで、アカウントを無制限に作成できるようになります。

Shopify Plusには「組織の管理画面」機能があり、複数のストアを一元的に管理することができます。「組織の管理画面」からは、ストア分析やリアルタイムのパフォーマンス分析、ユーザーやストアの管理が可能です。
「Shopify Flow」は、ストア内のさまざまなタスクを自動化できる機能で、ワークフローの効率化に役立ちます。

さらなる拡張機能として、Shopify Plusでは、通常版よりもAPIのレート制限を緩和しています。ストアのパフォーマンスを高めることで、大量のトラフィックやトランザクションにも対応できるオンラインストアを実現できます。

一般的に、月間売上高が100万ドル未満で、大量のトラフィックが発生しないビジネスの場合は、通常プランで十分です。

月間売上高が100万ドル以上で、大量のトラフィックが発生するビジネスであり、運用チームの規模が大きい場合はShopify Plusをおすすめします。

複数の国や地域において出品しているか

出品しているマーケット数から考える

「Shopifyペイメント」はすべてのプランで利用でき、多様なオンライン決済手段に対応しています。この機能によって、複数の国や地域での販売が可能になりますが、Shopify Plusでは、より広範囲なマーケットにおいて複数通貨での取引が可能になります。

Shopify Plusをご利用いただくと、「組織の管理画面」から、追加料金なしで９つまでストアを作成することができます。

複雑な言語設定に悩まされることなく、各国のマーケットに合わせた専用ストアを作成し、ローカライズされたコンテンツやデザイン、ディスカウント情報などの設定を自由に行えます。

Shopify Plusパートナーである当社では、特定のマーケットに適したストアデザインの構築および編集をサポートしています。

Kusmi Teaのオンラインストアの日本市場向けローカライゼーションサポート事例はこちらからご覧いただけます。

２カ国でのみの販売をお考えで、ストアデザインをローカライズする必要がない場合は、通常プランで２つのストアを別々に管理するのがおすすめです。

２カ国以上の国での販売を検討しており、ストアデザインの大幅なローカライゼーションや卸売チャネルが必要な場合は、Shopify Plusが適しています。

どの程度のカスタマイズが必要か

Shopifyは、専門知識がなくても誰でも手軽にオンラインストアを構築できるサービスですが、いくつか注意すべき制限があります。

チームに十分なリソースがあり、商品選びから配送までのブランド体験を強化したい場合はShopify Plusへの移行をおすすめします。チェックアウト画面や機能面のカスタマイズはShopify Plusでのみ利用可能です。

Shopify Plusでは、メインページのデザインやレイアウトのカスタマイズだけでなく、プログレストラッカーやカスタムフィールドなど、便利なツールを導入することもできます。また、「Shopifyスクリプト」を使用することで、配送方法の追加や自動ディスカウントの設定（一つ買うともう一つ無料など）、外部APIとの連携なども可能になります。

さらに、Shopify Plusは「Shopify POS Pro」や「Script Editor」などの専用アプリを提供しており、より簡単なカスタマイズを可能にします。そのほか、卸売の購入者に異なる価格を提示できる拡張機能「卸売チャネル」や、セールや商品リリースなどのイベントの自動化や管理を簡単に行える「Launchpad」などの機能も搭載しています。

また、上述した「Shopify Flow」は、タスクの自動化以外にも、PIMやERP、CRMなどの既存のプラットフォームとのシームレスな連携も可能にします。

チェックアウトやキャンペーンなどの複雑なカスタマイズを行わず、在庫管理システムやCRMとの自動連携を必要としない場合は、通常プランで十分です。

在庫管理やマーケティングキャンペーンなど、処理に時間がかかるタスクを実行したい場合や、ブランド体験を強化したい場合は、Shopify Plusが適しています。

Shopify Plusは大企業を対象としたサービスであるため、サポート体制も非常に充実しています。

「Merchant Success Program」は、Shopify Plusをご利用のお客様向けに、最高品質のサポートやアドバイスを提供するサービスです。24時間年中無休の優先サポート体制をはじめ、個々のビジネスに適した戦略策定やスケーラビリティに関する相談のほか、トレーニングやコンサルティングなども提供しています。

Shopifyはすべてのユーザーに対してさまざまな手段でサポートを提供しています。「Shopify Experts」や、当社をはじめとする「Shopify Partner」にご相談いただければ、ストアの構築を支援する「Launch Engineer」を派遣いたします。「Launch Engineer」はお客様専属のエキスパートで、 オンラインストアの立ち上げから移行、サードパーティアプリとの連携まで、一連のストア構築およびオンボーディングプロセスを支援します。

以上、プラン選定のヒントとなり得るいくつかの検討事項を紹介いたしました。これらの点を踏まえて、ご自身のビジネスに最適なプランを選びましょう。専門的な内容も含まれていたため、開発バックグラウンドをお持ちでない方にはわかりづらい点があったかもしれません。

以下の表に、Shopifyの通常プランとShopify Plusの主な機能と価格をまとめました。

ShopifyとShopify Plus、どちらがより適しているのかはビジネスによって異なり、明確な回答がありません。上記に挙げた点以上にさまざまな要素を検討する必要があり、すぐには答えが出ないかもしれませんが、この記事が少しでも選定の参考になれば幸いです。

どのプランにしようかお悩みの方も、すでにお決まりの方も、ぜひ一度Shopify Plusパートナーである当社にご相談ください。プランの選定からShopifyストアの立ち上げまで、迅速丁寧にサポートいたします。

最適なECプラットフォームを選ぶためには、プランや機能、システム連携など、さまざまな要素を検討しなければなりません。ShopifyとShopify Plusの違いについて説明しながら、どちらを選ぶのがベストなのか、選択基準をご紹介いたします。

ShopifyとShopify Plus、どちらを導入するべき？ | ブログ | CREAMデジタルスタジオ

ShopifyとShopify Plus、どちらを導入するべき？

「デジタル・トランスフォーメーション」とは、テクノロジーを駆使したビジネスの変革を目指す企業・業界が生んだ造語で、近年のバズワードになっています。しかし、このフレーズが本当に意味するところは何なのでしょうか。この記事では、デジタル・トランスフォーメーションの真の意味とデジタル化への取り組み方について、事例を交えながら紹介していきたいと思います。

デジタル・トランスフォーメーションとは

デジタル・トランスフォーメーションとは、既存のビジネスプロセスの効率化や生産性の向上を図るために、テクノロジーの統合および最適化を行う取り組みのことを指します。

最新のデジタルサービスを大量に導入することだけがデジタル・トランスフォーメーションではありません。これまでのやり方を再評価し、問題点を徹底調査したうえで、事業の根幹となるプロセスをゼロから作り直す機会でもあります。

そのフレーズが示す通り、この取り組みはテクノロジーの導入を起動力として、事業戦略や業務プロセス、企業文化など、ビジネスに何らかの変革をもたらすものでなければなりません。

効率性の向上
複数のワークフローを統合し、様々なタスクの自動化を行うことで、より重要なタスクに注力できるようになる。

生産性の向上
効率的な共同作業、円滑なコミュニケーション、エンゲージメントの強化を通して生産性の最大化を図る。

精度の向上
自動化によって、コスト削減を図りながら、入力ミスやタスク忘れなどのヒューマンエラーの軽減が期待できる。

インサイトの獲得
これまで入手できなかったデータを収集することで、より的確な経営判断を行えるようになる。収集したデータを分析することで、商品やサービスの最適化に応用できる。

ブランド体験の価値向上
デジタル技術を活用することで、顧客のブランド体験をより便利かつ効果的で、安価なものにすることができる。

近年では多くの企業や業界がデジタル化を優先事項として進めつつありますが、その取り組みのほとんどが失敗に終わっています。それはなぜでしょうか。新しいテクノロジーを導入すれば、それだけで組織自体が変化していくものだと広く信じられていますが、実際には、根深く染み付いた戦略や企業文化に変革をもたらすには、単なるデジタル化だけでは不十分です。

どういうことなのか、具体例を挙げてみましょう。ある企業がメール量の削減を図るために、Slackのようなチャットサービスの導入を決定したとします。導入自体は正しい判断である場合もありますが、実際の業務プロセスにこの変化を反映しきれていない状態（顧客に対して、メールではなくSlackでやり取りする旨を伝えるなど）では、根本的な変革にはつながりません。また、既存の方法をそのまま新しいサービスに置き換えるだけでは、真の意味での変革は起き得ません。メール量の多さが根本的な問題なのであれば、メールからSlackに変更するだけではなく、業務プロセスの見直しも忘れてはならない重要な要素です。

この例から学べることは、デジタル技術は単なる手段でしかなく、組織に直接的な変化をもたらすものではないということです。デジタル化の成功の裏には、それに関連する業務プロセスの適切な修正作業が必要であることを忘れてはいけません。デジタル技術は、適切な導入を行えば、複数のプロセスの統合を可能にし、関係者同士の共同作業を促進すると共に、タスクの自動化およびデータ収集の効率化を行える、組織に根本的な変化をもたらす強力なツールになり得ます。ビジネスの根幹となる業務プロセスを、デジタル技術がもたらす恩恵をフルに活用できるようなものに作り直して初めて、デジタル・トランスフォーメーションの成功と言えます。

デジタル化の成功は「人」次第

もう一つ、デジタル化の失敗例として多く見られるのが、使い手である「人」に対する配慮が欠けている事例です。デジタル・トランスフォーメーションの実現のためには、業務を遂行する最前線にいる関係者からの理解が必要不可欠です。しかしながら、多くのデジタル・トランスフォーメーションの取り組みにおいて、彼らのニーズやウォンツ、挙げられた問題点などが軽視されてしまっているのが現状です。実際にデジタルツールを利用する社内スタッフであれ、商品やサービスを利用する顧客であれ、デジタル化による付加価値を受けていることを実感してもらえない限りは、デジタル・トランスフォーメーションは遅かれ早かれ失敗に終わってしまいます。

デジタル・トランスフォーメーション成功の最大の壁は人であり、これを実現するのは簡単なことではありません。デジタル化は、ある人にとっては脅威であり、中には変化に抵抗を感じる人もいます。そのため、可能な限りエンドユーザーを巻き込み、人中心のアプローチを展開していくことが鍵になります。理想としては、すべての関係者と協働のもと、デジタル技術を活用したブランド構築を、組織の戦略と両立させながらも、変革が利益につながるような方法で実現させていくことです。注意したいのは、ユーザーや顧客のニーズを度外視したデジタル・トランスフォーメーションは、解決策ではなく問題点を生み出してしまうということです。この失敗を繰り返さないようにしましょう。

以上、デジタル・トランスフォーメーションの真の意味と、デジタル化を推進するにあたっての留意点について紹介させていただきました。テクノロジーは、デジタル・トランスフォーメーションを進めるうえでの氷山の一角にしかすぎず、業務プロセスをより効果的かつ効率の良いものにするためには、既存のやり方をどのように変え、デジタル技術の導入をどのように行っていくのかが最大の論点であると言えます。

デジタル・トランスフォーメーションのアイデアにお困りですか？創造的なデジタル化の事例については、こちらからご覧になれます。

デジタル・トランスフォーメーションに関するサポートが必要な場合は今すぐ弊社にメールにてご相談ください！

デジタル・トランスフォーメーションの真の意味とデジタル化への取り組み方について、事例を交えながら紹介しています。

デジタル・トランスフォーメーション入門編 | ブログ | CREAMデジタルスタジオ

デジタル・トランスフォーメーション入門編

デジタル化の中心には常に「人」がいます。デジタルプロダクトやサービスの開発にあたり、ユーザー第一の考えが極めて重要になってくるのはそのためです。しかしながら、相手の立場になって物事を考えるというのは口で言うほど簡単なことではありません。私たちの物の捉え方は、それぞれが培ってきた知識や経験、外部からの刺激によって縛られてしまっています。そうした中、プロダクトの方向性は正しいのか、実情を踏まえたインサイトを獲得するうえで役立ってくるのがユーザー調査です。今回は、デジタルプロダクトおよびサービスの成功に欠かせないユーザー調査について、気をつけたい4つの重要ポイントをご紹介いたします。

プロダクトやサービスの設計においては、ユーザーは誰なのか、どのような行動様式を取るのか、彼らのニーズや使用目的などを明確にしておく必要があります。言うまでもなく、こうした特性はプロダクトやサービスごとに異なります。たとえば、主に50代の従業員による使用を想定した社内ツールであれば、ユーザーがデジタルツールに不慣れな可能性や、視力低下をきたしている可能性を考慮しておく必要があります。6歳未満の子供向けのゲームアプリであれば、ユーザーにとって分かりやすく、関心を持ってもらえる内容にするために、テキストよりもビジュアルに重きを置く必要があるかもしれません。ターゲットユーザーのペルソナの構築またはインタビューを行うことで（可能であればその両方）、メインユーザーを明確に把握しながら事前に想定していたものとのすり合わせを行うことができ、真に必要とされるプロダクトやサービスの設計が可能になります。この情報があることで、無計画に設計を行うよりも、より的確な仮説に基づきながらプロセスを進めることができます。

具体例を挙げると、マルチブランドのフレグランスを扱う販売代理店、L’Atelier Des Parfumsのオンラインサイト立ち上げにあたり、当社では実店舗の既存顧客に対する実態調査を実施しました。その結果、顧客のほとんどが同じフレグランスをリピートせずに、別の商品を選んでいることがわかったのです。これは、調査を実施していなければ見落としていたインサイトでした。

問題解決において重要なのは、その根本原因を探ることにあります。表層に現れている問題というのは、より深層にある原因によって引き起こされていることが多く、そのベースにある問題点はすぐに顕在化するものではありません。本当の意味での問題解決とは、その根本原因を特定し、対処することで、そこから生じた様々な影響を解消していくことにあります。

問題点の全体像を把握するためには、すべてのステークホルダーを巻き込みながら、エンドユーザーの意見に耳を傾けることが非常に重要であると考えます。最終的にエンドユーザーがプロダクトやサービスの提供価値に納得しない限りは、成功は難しいでしょう。

当社が開発を支援したBulgariの腕時計修理のアフターサービス業務を合理化するための社内ツールがその良い例です。アフターサービスの工程に関わるスタッフは、修理依頼の効率性について、それぞれが異なった見解を持っていました。全レベルのスタッフの意見を聞くことで、根本原因から派生したすべての問題に対処しながら、顧客から店舗スタッフ、サービスセンタースタッフまで、すべてのユーザーの声を反映したソリューションの開発が実現しました。

プロダクトやサービスの方向性は合っているのか

上記の2点では、プロダクトやサービスの早期開発段階においてユーザー調査を導入することの利点についてご説明いたしました。しかし、プロダクトやサービスの真の実用性についてはこの段階では判断できません。ここからさらに一歩踏み込み、ユーザーテストを実施することで、ワイヤフレームやプロトタイプ、既存プロダクトの有用性（または無用性）を検証する段階に移ります。ユーザーがプロダクトやサービスの利用時に実際にどのような行動をとっているのか、どこでつまずく傾向にあるのか、ユーザーの期待やニーズに沿えていない部分はあるかなど、注意して見ていく必要があります。言葉によるフィードバックも重要ですが、実際の使用状況を観察することで、改善点が見えてくるケースも多々あります。

当社では、iRobot社のウェブサイト刷新にあたり、ユーザーが感じている不満点を明確にするための対面および遠隔でのユーザーテストを実施しました。サイト訪問者が特に苦労していたのが、メインコンテンツである製品情報を探し出すことで、カルーセルスライダーなどを駆使したUIデザインの複雑性が、サイトでの購入を妨げている要因だったことが判明しました。

プロダクトやサービスが「最終形」に結びつくまで、このプロセスを何度も繰り返していきます。そうすることで、時間とコストの節約になるばかりでなく、取り返しのつかない大きな問題が発生する可能性も事前に防げるのです。

最適化や改善の方向性は明確であるか

最終的にプロダクトやサービスがユーザーの元に届けられた後も、ユーザー調査を続けることで、ユーザー特性やプロダクトの使われ方などの情報を集め、改善や最適化のヒントを得ていくことも重要です。具体的には、ECサイトの離脱率が高いページを特定し、改善点を探すことなどが考えられます。当社でも、ジュエリーブランドPandoraのECサイトにおいて、特定のページのレイアウトを調整することで、ユーザー体験の向上に貢献できたという実例があります。

他にも、分析ツールを正しく活用することで、新たなターゲットユーザーとなり得る消費者特性の特定など、商機の拡大も視野に入れた取り組みも重要です。問題点と新しい機会の両方を明確にしておくことで、移りゆくユーザーのニーズや目まぐるしく変化し続ける世の中に対応したプロダクトやサービスの提供が実現します。

優れたデジタルプロダクトやサービスは、すべてエンドユーザーを第一に考えて設計されています。エンドユーザーを中心に考えた設計を進めていくことで、実際に直面している問題を、現実的かつ効果的な方法で解決していくことができます。ユーザーの声に耳を傾けること。非常にシンプルな解決策ではないでしょうか。

デジタルプロダクトおよびサービスの成功に欠かせないユーザー調査について、気をつけたい4つの重要ポイントを解説。

ユーザー調査を行う際に気をつけたい4つの重要ポイント | ブログ | CREAMデジタルスタジオ

ユーザー調査を行う際に気をつけたい4つの重要ポイント

アクセシビリティは、グラフィックやウェブデザインの根幹にあるものとして長く注目されてきたキーワードですが、テクノロジーの進化や社会問題への関心の高まりとともに、近年その重要性がさらに増してきています。

伝えたい情報がすべて伝わるよう、必要最低限の機能を追加することだけがアクセシビリティではありません。これからのアクセシビリティには、障害を持つ人々に対応したデザインを念頭に、様々なデバイスやインターネットへの接続回線を想定し、オンラインブラウジングに慣れていない人でもアクセスできるデザインを目指すという意味合いも含まれています。

アクセシビリティには様々な要素が求められるようになってきており、優れたUXデザインの実現にはこうした要求項目を押さえていく必要があります。ここに紹介するベスト・プラクティスには、ベーシックな内容からやや高度なものまでが含まれていますが、デジタルデバイス向けのデザインに取り組む際に押さえておくべきポイントとして、今後の参考にしていただけると幸いです。

コンテンツの少ない整然としたページは、障害を持つ人々に対してだけでなく、様々な面でプラスに働きます。要素を少なくすることでページに余白ができ、より大きなサイズのフォントや画像を使用することができたり、余白を有効活用したページの最適化を行うことも可能になります。また、スクリーンリーダーを使用する視覚障害者の方々にとっては、雑然としたページから情報を読み取ることは大変な作業であるため、強調したいコンテンツを優先させたデザインを採用することは、誰にとっても使いやすいウェブサイトの実現に必要不可欠な要素です。

すべてはサイズとカラーで決まる

一般的に、ウェブサイト上で可読可能な最小フォントサイズは16ピクセル、行の高さは最低でも125％以上必要と言われていますが、だからと言ってすべてのフォントサイズを大きくする必要はありません。ページのメインコンテンツについては視覚障害者の方に配慮したサイズと色選びが重要ですが、小さいフォントサイズを使用する代わりに、背景とのコントラストを効かせた色合いを選ぶなど、工夫を凝らすことで読みやすいウェブデザインに仕上げることも可能です。W3Cウェブサイトでは、モックアップの視認性について確認できる様々なオンラインツールを提供しています。また、カラーチェックを行う際に便利なブラウザチェックツールも多く存在します。

サイズに関してもうひとつ重要な要素としては、タッチスクリーンに配慮したデザインであるべきということです。ボタンやCTAが小さすぎると、指先が大きい人にとってはクリックしづらくなるほか、単に見落としてしまう可能性も高まります。標準スクリーン（非Retinaディスプレイ）上に表示するタッチ領域の最小サイズは、44×44ピクセルが推奨値とされています。しかし、すべてのアイコンがこの大きさでなければならないわけではありません。余白を活用したタッチ領域を確保することで、効果的かつバランスの取れたデザインに仕上げることも可能です。

コントラストだけがカラーデザインではありません。ユーザーの中には色盲の方もおり、意図した通りのデザインが伝わらないケースもあります。簡単な解決策としては、色盲のユーザーにも区別がつくような十分なコントラストのあるカラーコンビネーションを使用することですが、選べる配色は限られていることがほとんどです。誰にとっても見やすいデザインに近づけるためには、モノクロフィルターをかけて色に依存しない状態でモックアップの視認性を確認し、コントラストの強度を調整してみるというのも一つの手です。

また、テキストラベルやアイコン、マイクロアニメーションを取り入れることも、誰にとっても見やすいデザインを実現する上で効果的な方法です。

ウェブサイトパフォーマンスの向上

ウェブサイトパフォーマンスと言うと、UX／UIデザインとはかけ離れたテーマのように思えますが、実はアクセシビリティにも関連してくるキーワードです。すべてのユーザーが光速でインターネットを使える環境にあるとは限りません。
ウェブサイトが重くなり過ぎないように注意し、遅い回線でもストレスなく閲覧できるよう、ローディングタイムやデータ使用量を改善できるツールの導入も検討する必要があるでしょう。

スクリーンリーダーに対応した操作性の高いウェブサイト

インターネットの閲覧時にスクリーンリーダーに頼らざるを得ない視覚障害者の方々にとって、音声ガイダンスのみでアクセシビリティの低い複雑なウェブサイトを閲覧することは非常に煩雑な作業です。

一般的に広く使われているUIデザインの中には、スクリーンリーダーでは読み取れず、ユーザーに内容が伝わりきらないものも多々あります。マウスなしでは操作の難しいドロップダウンメニューや、スクリーンリーダーでは対応できないタイプのスライドショーやカルーセルなどは使いすぎないようにしましょう。

一歩進んだ考え方としては、ウェブサイトのソースコードを再構築することで、見た目のデザインを変えることなくアクセシビリティを強化するという方法です。画像にキャプション（alt属性）を追加することはもちろん、スクリーンリーダー利用者に優しいようにコードスニペットを再編成することでも、大きな助けになります。その場合、サイト上のビジュアル要素は、別途CSSファイルでポジショニングして、メインのコードストラクチャは、スクリーンリーダー向けに構築しましょう。

また、マウスを使用できないユーザーに対して、キーボードによる操作に対応したウェブサイトの構築も求められてきています。ほとんどのブラウザは、キーボードのTabキーやSpaceキーを押すことで操作できるようになっていますが、デザイナーが手を加えることで、より簡単にインターネットを利用できる環境に仕上げることも可能です。簡単な例としては、リンクやボタン、フォームなど、フォーカスされている箇所を視覚的に明示することで、どこを読み上げているのかをユーザーが把握できるようにするという方法です。

ここに挙げたのは、アクセシビリティを実現するためのほんの一部のヒントにしかすぎません。アクセシビリティに関する他の記事は、視覚障害者向けのデザイン（スクリーンリーダーでの読みやすさを考慮したデザイン）に注目しているものがほとんどですが、この記事ではそれ以外の観点からも本当の意味でのアクセシビリティを実現できる方法を紹介させていただきました。アクセシビリティの概念はより多くの意味合いを含んだものに変化しつつあり、我々もそうした変化に対応しながら、新たな要求事項を反映させたデザインを目指していく必要があります。

弊社は上記に述べたアクセシビリティのヒントを常に考慮しながらUXデザインに取り組んでいますが、スイスの大学病院のためにタッチスクリーンモニター向けナビゲーションアプリを制作した際は特にインクルーシブ（包括的）デザインに重点をおきました。病院の患者や来館者が主なユーザーであるため、高齢者・障害者・テクノロジーに弱い方でも使いやすいアプリにする必要がありました。アプリのUXはもちろん、タッチスクリーンモニターを収納するハードウェアケースまで、アクセシビリティを考慮してデザインしました。院内ナビゲーションアプリの詳しい事例についてはこちらからどうぞ。

A Primer to Web Accessibility for Designers Nicholas Kramer作、Medium

Stop designing for 85% of Users… Tom GrahamとAndré Gonçalves作、Smashing Magazine

テクノロジーの進化や社会問題への関心の高まりとともに、近年重要性が増してきている「アクセシビリティ」を詳しく解説。

UXデザインのアクセシビリティ向上のための4つのヒント | ブログ | CREAMデジタルスタジオ

UXデザインのアクセシビリティ向上のための4つのヒント

テクノロジーの進化と人々の価値観の変化とともに、トレンドは常に新しく形成されては形を変えていくものです。昨年に引き続き、2018年も目が離せない最新トレンドをいくつかご紹介いたします。ここでご紹介するのはほんの一部にしかすぎませんが、今何が“キテ”るのか、何が廃れてしまったのか、トレンドの全体像を把握するうえでの取っ掛かりとなれば幸いです。

流行は巡るものと言われている通り、スキューモーフィズムからフラットデザインへの移行が数年前から始まるも、今では完全なフラットデザインを追求したデザイン手法はすでに時代遅れになっています。今デザイナーたちが注目しているのは、昨年から流行の兆しが見え始めた「フラットデザイン2.0」と呼ばれる手法で、シンプルなだけのデザインを卒業し、再度グラデーションやドロップシャドウを採用したデザインが普及しつつあります。フラットデザインを活用したイラストレーションを取り入れ、マイクロアニメーションを組み込むことで、より活気のあるウェブサイトや付加価値の高いアプリに仕上がります。

大胆なカラーで冒険を。最近のトレンドとしては、よりカラフルで大胆な色合いが好まれる傾向にあります。モノトーンで仕上げるよりも、様々なカラーを加えることで、アイデンティティの確立を目指しているブランドも増えつつあります。また、ウェブデザインや写真デザインの分野でもデュオトーンの人気が高まってきており、鮮やかな色合いとグラデーションの組み合わせはフラットデザインの新しいキートレンドとなりそうです。

UIデザインにおけるイラストレーションの活用は真新しいものではありませんが、フラットデザインの復活によって、遊び心があり、新鮮で親しみやすいブランドイメージを目指すブランドが増えてきています。特に、ゲームのような遊び心と正確な幾何学形状をうまく組み合わせたアイソメトリックスタイルのイラストレーションが最近のトレンドとして人気です。

マイクロアニメーションから動画デザインまで

アニメーションは今年大ヒットすること間違いなしのトレンドです。より活気のあるデザインを求めてCSSアニメーションを極めるデザイナーもいれば、動画デザインにまで手を広げているデザイナーもいます。バックグラウンド（背景）やデザイン・エレメント（要素）も、ますますインタラクティブなものになってきており、マウスの操作によって起きるインタラクションやページ遷移時のトランジション効果、マイクロアニメーションの効果など、ウェブサイト訪問者のトラフィックパターンを把握しながら様々な進化を遂げてきています。これらのスキルを有効活用することで、ブランドストーリーに対する共感を呼びやすくなるほか、ユーザー体験の向上にもつながります。

グリッドにとらわれない自由なレイアウト

固定観念を捨て、自由な発想を。ウェブサイトのレイアウトデザインも、従来の古典的なフォーマットから、空白スペースや新たなポジショニングを試用した挑戦的なものに変わってきています。幾何学模様や斜線を取り入れたクリエイティブなデザインへの人気が高まるにつれ、グリッドに基づいた平凡なレイアウトのウェブサイトは時代遅れになりつつあります。

「レス・イズ・モア」 ― タイポグラフィデザインは、それ自体がイラストレーションとして機能しています。強調したいメッセージがあれば太字で大きめのフォントを使用し、さらにオンラインのフォントライブラリーやCSS3、SVGを活用することで、今流行りのブルータリズムやミニマリズムを表現することも可能です。太字フォントの中でも、落書きのようなハンドライティングフォントが特に注目を集めており、より人間味のある破壊的で挑戦的なデザインが好まれる傾向にあります。

出典: 22° (Veintidós Grados) (上) The Disaster Artist (下)

一歩進んだモバイルファーストなウェブデザイン

スマホユーザーの増加とともに、今やパソコンよりもモバイルデバイスからウェブサイトを閲覧するアクセス数が多くなっており、モバイルファーストなウェブデザインはトレンドではなく当たり前に求められる機能になっています。今のウェブサイトに求められているのは、ポートレートフォーマット（縦長）のデザインで、低解像度のスクリーンやタッチスクリーンでの閲覧を想定したレスポンシブなレイアウトです。

アクセシビリティは、ウェブデザインの根幹となるベスト・プラクティスとして10年以上前から注目されているキーワードです。新しいテクノロジーやモバイルデバイスの登場は、デザイナーにとっては新たなチャレンジとなりました。アクセシビリティとは、すべてのユーザーがアクセスしやすいようにウェブサイトに新しい機能を組み込むという従来の意味を超えて、ソースコードを最初から書き直し、ユーザー体験について徹底的に追求するところにまで及んでいます。ここでは詳細は割愛させていただきますが、アクセシビリティは幅広いトピックで、腕の良いデザイナーが追求するべきベスト・プラクティスを多く提供している分野です。

ここに挙げた例はほんの一部で、これらのトレンドに従うことが必ずしも革新的であるとは限りません。今“キテ”るものを見極め、それを独自のスタイルとして確立していけるかどうかは、すべてデザイナーの手腕次第です。可能性は無限にあり、トレンドは常に変化し続けるもの ― 2018年も私たちを驚かせてくれる多くの発見があることでしょう。

フラットデザイン2.0から、マイクロアニメーションまで、2018年も目が離せない最新トレンドをいくつかピックアップしました。

UI/UXデザイン2018年最新トレンド | ブログ | CREAMデジタルスタジオ

UI/UXデザイン2018年最新トレンド

GDPと消費市場の大きさにおいて世界3位にランクする日本は、海外進出を狙う外資系の企業にとって、とても魅力的な市場です。しかし、高い数値とは裏腹に、日本は固有の文化や言語、エチケット、価値観を持っているため、市場に参入することが非常に難しいことでも有名です。

このような背景のなか、日本向けのローカリゼーションが行き届かず、ぎこちない翻訳が目立っていたり、部分的に英語が残ってしまっている外資系企業のウェブサイトをよく目撃します。日本向けのサイトがある分、まだいい方だと思うかもしれませんが、こうした安易な考えがあなたのブランドを結果的に傷つけるかもしれません。

今回は、外資系企業が日本で成功するために、ローカリゼーションを必要とする理由と、翻訳する際に気をつけたい点について、詳しく見ていきましょう。

島国である日本の国民は、なんと99%が日本人です。実際に、日常の中で日本語以外の言語を使う機会はそうそうありません。また、ETSの調査によると、英語力テスト「TOEFL iBT」の日本のスコアは、アジアの中でも最下位国のひとつです。よって、日本市場に参入する場合、必ずコミュニケーションを日本向けにローカライズすることをお勧めします。

アルファベットのみを用いるアメリカなどの国に比較して、日本語には、ひらがな・カタカナ・漢字の三種類の文字体系があります。さらに、日本語では尊敬語・謙譲語・丁寧語と、敬語を使い分ける必要もあるため、より複雑さが増します。また、英語と日本語は文法的に全く異なり、文章構成で主語・目的語・動詞の順序が違います。その上、文化によって表現や言葉のあやも違うため、翻訳アプリなどを使っているサイトやコンテンツは、明らかに文法が間違っていたり、不自然な表現が目立ちます。特に、翻訳のみならず、マーケティングにおいて重要なトーンとマナーも考慮した本当の意味での「ローカリゼーション」が必要な場合は、日本語および日本の文化をきちんと理解している専門家に任せることを強くお勧めします。

日本の消費者は、購買意思決定の際に、売り手と購入する製品およびサービスの信頼性に頼る傾向が、他の国に比較して非常に強いです。そのため、同じ製品でも値段が高い大手ブランドのものを購入したり、国産製品を好む傾向があります。リスクを嫌う日本の消費者にとって、不自然な表現や他国語が残るサイトは信頼性にかけるため、中途半端な状態で運営を続けるとビジネスに悪影響をもたらす可能性があります。

信頼できる良質なブランドであることをアピールしつつ、競合が多く存在する中、市場にて独自のポジショニングを確立するために、消費者に響くブランドイメージを構築する必要があります。翻訳だけでとどまらず、ブランドとブランドのコミュニケーションをしっかりと地域に適応することが成功のカギです。

まだまだ無名な企業として新しい市場に参入する場合、まずは潜在顧客に見つけてもらうこと、そしてビジネスの存在を知ってもらうことからがスタート地点です。しかし、国境のないオンライン上には莫大な情報量があります。そのような状況の中、顧客にサイトやコンテンツを見つけてもらうためには、ターゲット層がどのようなキーワードを使って貴社を検索しているかを把握し、グーグルなどの検索エンジンでそのキーワードが検索された時、上位に掲載されるように働きかけなくてはいけません。ランキングは、いかにユーザーが検索したキーワードに対してコンテンツが伴っているかで左右されます。そのため、日本語や日本の文化、市場の傾向などを考慮したキーワードをサイトのコンテンツに反映させることがSEO対策において重要です。また、きちんと翻訳やローカライズされていないサイトは、検索順位および検索のヒット率に影響が出てしまいます。

日本の日にちや時間、通貨などを含む数値の表示形式は、他の国のものと異なります。また、名前の表示順序や住所、郵便番号の形式も違います。些細なことかもしれませんが、サイト上のこのような項目の表示形式が間違っていると、非常に際立ちます。また、日本ではECサイトの支払い方法として他国ではあまり見かけない銀行振込や代金引換、コンビニ決済などが必須です。このように、ローカリゼーションは言語の翻訳で止まらず、現地の文化や基準を理解し、徹底的に組み込む必要があります。

日本市場で成功するには、顧客の心に響くブランドおよび信頼できるイメージを構築することが大前提です。そのためには、言語の翻訳のみならず、日本の市場や文化などを全面的に考慮したローカリゼーション戦略が必要不可欠と言えるでしょう。

※海外から日本市場へ進出を考える外資系企業に向けて書かれた記事を日本語に翻訳しています

外資系企業が日本で成功するために、ローカリゼーションを必要とする理由と、翻訳する際に気をつけたい点について、詳しく解説します。

外資系企業にとって必要不可欠なローカリゼーション | ブログ | CREAMデジタルスタジオ

外資系企業にとって必要不可欠なローカリゼーション

CREAMが創業されたのは2010年。過去の7年間を振り返ってみると、様々な分野で活躍する企業様と数々のプロジェクトで協働する機会から、チームメンバーの変動、数回にわたるオフィスの移転、2011年の東日本大震災後に直面した厳しい時期まで、色々なことがあったと感じます。創業当時と比べると、提供できるサービスや社員数も増え、ビジネスの規模が全体的に拡大するなど、CREAMは大きく変化を遂げてきました。今回、創業から愛用してきたCREAMのアイデンティティを見直し、進化した現在のCREAMの姿を象徴するものに、変更することになりました。新しいアイデンティティは、当社の成長と功績、そして将来への展望を映し出すシンボルです。生まれ変わったCREAMをご紹介します。

いままでのCREAMのロゴは、まるで生クリームを使って書いたような筆記体を用いていました。ユニークで、遊び心があり、印象的だった以前のアイデンティティは、役割を十二分に発揮してくれました。しかし、いくつかの難点もありました。例えば、縮小した場合、ロゴ内の細い線が見えにくくなり、ポイントである生クリームらしいテクスチャーが失われてしまいます。それによって、ロゴのアピール力が下がってしまう上に、読みにくいという欠点を持っていました。さらに、以前のロゴは長方形式のみの対応かつ、筆記体を半分に分解することができなかったため、SNSのプロフィール写真などの四角い形式で使用したい際に、毎度困っていました。これまでのCREAMの歩みを象徴することはもちろん、今度はユーザビリティもしっかりと考慮して、引き続きインパクトがありつつ、より使いやすいアイデンティティを制作することに決めました。

CREAMは、高い機能性からくる美しさ「機能美」を常に追求しています。そのため、アイデンティティを新たに制作する際にも、CREAMの本質を捉えることとロゴの柔軟なユーザビリティに着目しました。過去の過ちから学んで、今回は長方と四角形式の両方に対応した、2タイプのロゴを作成することになりました。また、アイデンティティを最小限まで絞った、CREAMだと一目で認識できる企業シンボルを作ることも目標でした。このような点を考慮して、シンプルかつインパクトのあるフォントを中心に新たなアイデンティティのデザインを進めることになりました。CREAMの本質と特徴的なスタイルを表した5つのキーワード「シンプル・モダン・楽しい・大胆・力強い」を軸に、まずは自由にアイディアを広げてみました。

試行を重ねた末、斜めで力強い太字のフォントを採用することになりました。シンプルかつ印象的なロゴは、CREAMの強さと志気を表しつつ、当社の遊び心とダイナミックな特色を映すという二面性を持っています。シンボルに関しては、CREAMの「E」を起用。新しいアイデンティティの特徴的な斜めの線使いを際立たせるために、文字から縦棒を取り除き、三本の横棒のみをキープしました。CREAMの新たなトレードマークとなった斜めの線使いは、ワンポイントおよび統一感を出すために、ウェブサイトや名刺などのデザインにも使われました。

アイデンティティの応用：名刺

今までCREAMでは、アイスクリームの味に因んだ色をメンバーごとに指定し、それぞれ独自の色で印字された名刺を使っていました。例えば、デザイナーはイチゴ味からとったピンク色、デベロッパーはオレンジ・シャーベットからとった橙色など。新アイデンティティの制作当初、テーマを一色に絞ることも検討されました。しかし、CREAMの強みはズバリ、各メンバーが違う「持ち味」を発揮していること。そのため、今後もアイスクリーム色のコンセプトを使い続けることになりました。さらに、新たな要素として「CREAM」という社名の由来を名刺の裏側に記載しました。実はCREAMは、二つの起源を持っています。一つは表向きの堅めな由来で、英語の言葉のあや「the cream of the crop（粒ぞろい・最も精選されたもの）」からとりました。二つめ（そして本当）のちょいワルな由来は、90年代に流行ったラップグループ、Wu Tang Clanの曲「Cash Rules Everything Around Me（お金はすべてを支配する）」です。
当社と名刺交換をした際には、ぜひチェックしてみてくださいね！

2010年の創業から愛用してきたCREAMのアイデンティティを見直し、進化した現在の姿を象徴するものに、生まれ変わりました。

2017年4月9日 - CREAMが創業されたのは2010年。過去の7年間を振り返ってみると、様々な分野で活躍する企業様と数々のプロジェクトで協働する機会から、チームメンバーの変動、数回にわたるオフィスの移転、2011年の東日本大震災後に直面した厳しい時期まで、色々なことがあったと感じます。創業当時と比べると、提供できるサービスや社員数も増え、ビジネスの規模が全体的に拡大するなど、CREAMは大きく変化を遂げてきました。今回、創業から愛用してきたCREAMのアイデンティティを見直し、進化した現在のCREAMの姿を象徴するものに、変更することになりました。新しいアイデンティティは、当社の成長と功績、そして将来への展望を映し出すシンボルです。生まれ変わったCREAMをご紹介します。

CREAMの新しいアイデンティティ公開 | ブログ | CREAMデジタルスタジオ

CREAMの新しいアイデンティティ公開

注目トピックの不定期更新：テクノロジー、デザインなどについてCREAMチームからのインサイトをシェアしています。

ニュース