美しく再設計されたCore Stylesで、最新の機能とデータをユーザーに提供

見出し

これはレイアウト確認用のダミーテキストです。

2022年のデザイントレンドに基づいた、Core Styleベースマップへの新しいユーザーフレンドリーな機能

2022年のデザイントレンドに基づいた、Core Styleベースマップへの新しいユーザーフレンドリーな機能

美しいMapbox Core Styleベースマップは、業界最高の地図製作者によって作成されており、開発者が独自のベースマップを構築するのに費やすはずだった膨大な時間を節約できます。これらは、構築されたとおりに正確に使用することも、位置データとデザイン要素でカスタマイズできるベースレイヤーとして使用することもできます。 

Core Styleベースマップは、可能な限り幅広い顧客のユースケースに対応するように意図的に設計されており、クライアント側でスタイル設定できます。または、開発者自身がstyle.jsonファイルを編集することもできます。Core StyleベースマップはMapbox Studioで利用でき、アイコンとテクスチャを完全にデザインコントロールすることで、あらゆるブランドにシームレスに適合する地図を作成し、ユーザーを喜ばせることができます。

Mapboxは、開発者、デザイナー、組織が最新の魅力的な地図エクスペリエンスをエンドユーザーに提供することが不可欠であることを認識しているため、最新のトレンドに合わせてCore Styleベースマップを定期的に再設計し、機能と同じくらい最先端に見えるようにしています。2022年には、注目すべきデザイントレンドには、ミニマリズム、簡素化されたUX、鮮やかな色、没入型3Dなどがありました。

これらのトレンドに影響を受け、2022年には、当社の主要なベースマップであるCore Styleの5つのデザインを刷新しました。 

  • 洗練された現代的なモチーフを提供し、機能性を損なうことはありません。
  • 業界をリードする当社のパフォーマンスを基盤としています。
  • 地図のインタラクティブ性を向上させる、繊細かつ巧妙なタッチを適用します。
  • さらに多くの位置データをレイヤー化して、特に歩行者にとって、ベースマップのナビゲートを容易にします。 

これらの改善はすべて、人々が周囲の世界を発見できる豊かな体験を生み出します。

Mapbox Core Styles

5つのコアスタイルのアップデート

Mapbox Streets – 新鮮なカラーパレットと読みやすくなった道路網

包括的な汎用スタイルであるMapbox Streetsが、クリーンで新鮮なカラーパレットで更新され、より正確で判読しやすい地名ラベルとPOI(Point of Interest)が含まれるようになりました。さらに、道路と交通ネットワークのスタイルを再設計し、見やすくしました。Mapbox Studioのレイヤーの視覚的な階層構造が改善され、設定が簡素化されたことで、このスタイルをより簡単にカスタマイズできるようになりました。

Mapbox Streets Core Styleの変更

その結果、直感的で予測可能な視覚的階層が実現し、各ズームレベルで簡単なナビゲーションが可能になります。歩行者は検索によって不慣れな地域を簡単にナビゲートでき、観光客は旅行計画のために店舗やレストランの場所をよりよく知ることができ、ドライバーは効率的にルートを特定して構築できます。 

Mapbox Outdoors – アウトドアアドベンチャーを容易に発見

Mapbox Outdoors は、自然豊かな場所に焦点を当てた汎用地図であり、区別しやすい道、小道、トレイル、岩、山頂などを含む、厳選されたタイルセットを備えています。これらのアップデートは、ハイキング、サイクリング、スキー、その他の冒険的なユースケースに合わせて特別に調整されています。

Mapbox Outdoors Core Styleの変更

さらに、地形の勾配などの自然な特徴は、陰影と等高線で強調され、大胆な色で道路が区別されています。Mapbox Outdoorsを使用すると、冒険好きな人は、より安全で優れたナビゲーションで自然を探索できます。

Mapbox Satellite Streets – データの表示に最適なキャンバス

これは、Mapbox SatelliteとMapbox Streetsのベクターデータを組み合わせたハイブリッドベースマップです。

Mapbox Satellite Streets Core Styleの変更

道路の不透明度とアイコンの彩度を上げて、視認性を向上させています。これらのアップデートにより、Mapbox Satellite Streetsの有用性が向上し、空白のキャンバスやデータのオーバーレイとして利用できる、クリーンでモダンな外観になります。

Mapbox LightとDark – カスタムデータ向けの合理化されたデザイン 

繊細なライトマップとダークマップはさらに簡素化され、ロケーションに関するストーリーを効果的に伝えるためのキャンバスを提供します。

Mapbox Light Core Styleの変更

いくつかの重要な変更点としては、簡素化されたスタイルのために調整された土地利用密度と、合理化された美学のために変更された水スタイルが含まれます。さらに、カスタムデータを強調表示するためのスペースを増やすために、集落密度が調整され、表示される名前が少なくなっています。

これらのスタイルは、データ視覚化のための簡略化されたキャンバスであるだけでなく、まったく新しいスタイルを作成するための優れた出発点となります。

Mapbox Dark Core Styleの変更

ベースカラーを変更し、Mapbox Studioでアイコンを調整するだけです。

すべてのスタイルをさらにアップデート

以下のアップデートは、当社の主要なベースマップスタイルの一部またはすべてに適用されます。

地球と大気のアップデート

低ズームレベルでは、すべてのCore StyleベースマップがデフォルトでGlobe Viewになります。さらに、霧と大気のプロパティが含まれます。これは、大陸規模で視覚情報をリアルに表示する場合、フラットで歪んだメルカトル図法がデフォルトのオプションではないことを意味します。

Mapbox Globe View

地球儀を回転させるときに、世界をナビゲートしやすくするために、以下を追加しました。

  • よりリアルな海洋深度(水深測量)を表示する軽量の海洋詳細レイヤー。
  • 都市のラベリングを改善。 
  • 簡略化された道路ネットワーク。

アイコンと歩行者のアクセス性

Mapbox StreetsとOutdoorsのPOIアイコンに背景の図形とより際立った色が追加され、モバイルデバイスでの視認性が特に向上しました。Mapbox Studioでは、分類に基づいてさまざまな図形、サイズ、色でアイコンをカスタマイズできます。横断歩道、建物の入り口、フェンス、ゲートなどの歩行者向けラベルの表示も増やし、徒歩でのナビゲーションを効率的、安全、かつアクセスしやすくしました。

Mapbox Studioの新しいアイコンと歩行者向けアクセシビリティ

Mapboxは、より高いズームレベルで表示される商業、工業、および住宅の土地利用分類により、ウェイファインディングをさらに改善しました。これらのレイヤーにより、ユーザーは集中活動エリアまたは制限区域にいつ入るかを簡単に確認できます。

新しい商業、工業、住宅地の土地利用分類

地図を国際化する

Mapboxの新しいコンポーネントを使用すると、UIで1つの設定を行うだけで、国際化(新しい機能)に対応できるようにコアスタイルを簡単に準備できます。Studioプレビュー機能を使用して、Studioで地図の言語/世界観をプレビューすることもできます。

Mapbox Maps Internationalizationを使用すると、開発者は、顧客の好みのローカル言語と世界観で幅広い地図を動的に表示するために必要なカスタムスタイルの数を大幅に削減できます。言語と世界観の順列ごとに数百もの個別のスタイルを構築する必要がなくなり、コーディングと検証の時間、さらには将来のメンテナンスも節約できます。

Studioでの地図の言語/世界観のプレビューは現在プライベートベータ版であり、近日中に広く利用できるようになります。

より高速な読み込み、処理、およびレンダリング

新しいスタイルのアップデートを最適化するために、ロード時間を短縮し、レンダリングパフォーマンスを高速化するために、全体的な地図パフォーマンスを改善しました。新しい複雑なレイヤーを追加する場合でも同様です。

その他の機能拡張: 

  • より高性能なコードによる表現構文の改善、 
  • デバイスの低消費電力化、および 
  • フレーム時間平均の全体的な改善。

Mapboxの地図は、可能な限り高いフレーム/秒の処理を最適化しながら、約60fpsを維持します。

最新のUXを今すぐ体験しましょう!

新しいMapbox Core Styleベースマップをアプリまたはサービスに活用する方法については、ドキュメントページをご覧ください。

これらのベースマップはMapbox Studioでも利用でき、ニーズに基づいてスタイルを簡単に操作およびカスタマイズできます。

Mapboxの地図デザインチームは、コアスタイルの継続的な改善に努めており、皆様からのフィードバックをお待ちしております。ご意見やスタイルを共有される際は、hey-map-design@mapbox.comまでお気軽にご連絡ください。  

まだMapboxで開発されていない場合は、今すぐアカウントを無料で作成できます。 

始めましょう

const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v12',
    center: [-74.5, 40],
    zoom: 9
});

これはレイアウト確認用のダミーテキストです。

これはレイアウト確認用のダミーテキストです。

関連記事