<\/HEAD>
もし私がGISの専門家でなかったら、いつもクールなバックアップの仕事の選択肢として考えていたのはペイントカラーの名前付けでした。もちろん、GISの専門家として、ここそこで色を使うことはあります - 地図のスタイリングやウェブアプリのデザインなどです。だから、今年の初めにCity of BostonのGISチームが私とLDafner-esristaff に彼らのArcGIS Onlineサイト、BostonMapsの再設計を手伝わせてくれたとき、それは楽しい課題になるとわかっていました。そしてさらに良いことに - 再設計には市の新しいウェブカラースタイルを使うことが含まれていて、そこにはCharles Blue<\/STRONG><\/SPAN>やFreedom Trail Red.<\/STRONG><\/SPAN>といった素晴らしい名前の色合いが含まれていました。<\/P><\/P>背景として - 数年前に私たちは市と協力して彼らの最初のArcGIS Onlineリリースを行いました。彼らは大きなインパクトを与えたいと考え、ArcGIS Onlineでの存在感を非常に意図的にデザインしました - バナーグラフィックを作成し、ホームページをカスタマイズし、新しいアイコンを作成するなどです。その結果は数年間よく使われましたが、更新の時期が来ていました。更新を促した一つの理由は、市が再設計されたウェブサイト - pilot.boston.gov (現在公開中) を開発していたことです。全く異なる見た目と感触になる予定で、市は新しいブランドガイドラインを開発し、新しい書体、ロゴ（そしてもちろん色）も含まれていました。<\/P><\/P>デザインとブランディング（特にデジタルメディアにおいて）は地方自治体にとってますます重要になっており、GIS専門家からもブランド基準と調和したデザインの地図やアプリを作りたいという声をよく聞くようになりました。そこで私たちには明確な指示がありました - 新しいBostonMapsデザインをpilot.boston.govサイトと調和させること。私たちが行った作業の詳細を共有したいと思います。同様のプロセスを経ている他の人々に役立つことを願って。以下は私たちが取った3つの簡単なステップです:<\/P><\/P>1. バナーグラフィック:<\/STRONG> これはArcGIS Onlineホームページで注目を集める要素です！多くのお客様がこれらのガイドラインを使って自分で画像を作成している素晴らしい例を見てきました。BostonMapsでは地図のスクリーンショットを取り入れ、その上にOptimistic Blue<\/STRONG><\/SPAN>のレイヤーを重ねました。B<\/STRONG><\/SPAN>マーク／ロゴ（サムネイルにも繰り返し使用）とタグ付けで公式な市のウェブサイトであることを示し、完成した外観はこちらです:
<\/P><\/P>2. フラットデザイン:<\/STRONG> バナーグラフィックやサムネイルが通常とは微妙に異なって見えることに気づいたかもしれません - 市のウェブチームからフラットデザインを使用し、角丸やドロップシャドウを排除してページに奥行きを与える効果をなくし、よりミニマリストな外観にするよう依頼されました（これはしばらく前から人気のあるウェブデザイントレンドです）:
これを実現するために、ホームページ設定にアクセスし、HTMLソースコードビューを開きました。ArcGIS OnlineホームページにHTML/CSSコードを挿入して様々なスタイルオーバーライドができることをご存知でしたか？例えば、このCSSスニペットはホームページ内の様々な要素から角丸と影を取り除きます:<\/P><\/P><style><\/SPAN><\/P>\/* 以下から角丸ボーダーとボックスシャドウを削除 *\/
#matrixLayout, \/* 組織バナー *\/
#featuredMaps, \/* 特集アイテムコントロール *\/
#featuredMaps #fHeader, \/* 特集アイテムコントロールヘッダー *\/
.galleryNode.small .galleryThumbnail, \/* 個別特集アイテム *\/
#bottomContent { \/* 組織説明 *\/
-webkit-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
}
\/* 特集アイテムコントロールと組織説明部分の下部ボーダーカラーも削除したい場合 *\/
\/* ボックスシャドウ削除時に見える部分です *\/
#featuredMaps,
#bottomContent {
border-bottom: none;
}
</style>
3. アイコン<\/STRONG>: 多くの人はArcGISホームページ下半分を追加コンテンツ用コンテナとして使用します - 説明文や人気アプリへのリンク、連絡先情報などです。市はこのエリアで彼らのGIS作品3つのコレクション：Story Maps、Open Ddata、およびInteractive Apps を宣伝したいと考えていました。新しいBoston.govサイトに合わせて、この3カテゴリ用アイコンも同じミニマルな線画美学で揃えたいと思いました。私はアーティストではないので利用可能なアイコンに頼る必要がありました。そこで私のお気に入り新ウェブサイト - Noun Project の登場です。このウェブサイトは言語表現として視覚的表現となるアイコンが豊富に揃っています - 飛行機からシマウマまで幅広い画像があります。私たちは一貫性を保つため同じアーティストによるアイコンを見つけ、それらが意図した用途でライセンスされていることも確認しました。それらをより「地図的」にするためにプッシュピン記号も追加しました。 私たちのお気に入りの赤の色合い。結果：<\/P>
<\/P><\/P>これら三つの技術を組み合わせることで、市のArcGIS Onlineホームページに本当に変革的な効果がありました。今では市の他のウェブプロパティと非常にシームレスに融合し、GISスタッフが誇りを持って紹介できる新鮮でモダンな外観になっています。 <\/P>
<\/P>ぜひご自身でご覧ください - サイトはこちらから訪問できます： http:\/\/boston.maps.arcgis.com<\/A><\/STRONG><\/P><\/BODY><\/HTML>
