このたび、Makoto Tejima のサイトにペンゾーが登場しました。
白い丸いボディに黒いバイザー、縦に光る青い目、胸元の青い宝石が目印です。トップページをはじめ、提供サービスやご相談の流れなど、サイトの各所でご案内役として姿を見せています。
ページを開いたときの第一印象を、説明文だけに頼らない形にしたい、というのが今回の狙いです。文章はそのままに、同じ顔がページのあいだをつなぎます。
システム開発の話は、言葉だけでは硬く見えがちです。ペンゾーを置くことで、相談の入口を少しやわらかくしています。中身の説明を薄くするためではなく、読む前の空気を揃えるためです。
会社のロゴとは別に、サイトの中を歩く案内役をひとつにしました。ページが変わっても顔が変わらないので、初めて来た方でも「まだ同じサイトにいる」と分かりやすくなっています。
ペンゾーとは
ペンゾーは、当サイトの案内役です。呼び方はペンゾーで統一しています。
かたちはシンプルです。丸い白いボディ、顔を覆う黒いバイザー、縦に並ぶ青い目、胸の青い宝石。手の先と宝石の青が、サイト全体の色の基準になっています。
表情を大きく変えるのではなく、目と宝石の光で「ここにいます」と示すデザインです。小さく表示しても、縦の目と宝石で同じキャラクターだと分かるようにしています。
ブラウザのタブに出るアイコンも、同じペンゾーです。ブックマークや履歴の一覧でも、このサイトだと見分けやすくなっています。
サイトのどこにいるか
ペンゾーは、次のような場所に登場します。
- トップページのファーストビュー
- 提供サービスのページ（デスクで作業するシーン）
- 業務の流れ（ご相談から進める手順の案内）
- ブラウザのタブアイコン
トップでは、画面の印象をやわらげる案内役として置いています。サービス紹介の文章の横にいることで、「誰がこのページを案内しているか」が先に伝わるようにしています。
提供サービスのページでは、デスクに向かう姿が入口の絵になっています。開発の話は抽象的になりやすいので、作業している姿を先に見せる構成です。
業務の流れでは、各ステップのサポート役として顔を出します。相談、ヒアリング、設計、開発、公開後の伴走、という進み方の横で、同じ顔が繰り返されます。
スマートフォンでも登場します。画面幅によって位置や大きさは変わりますが、白いボディ、黒いバイザー、縦の青い目、胸の宝石、というルールは共通です。
色と塗り
サイトの青は、ペンゾーの手の先や宝石に近い水色から、少し深い青までを使っています。
文字やメニューは読みやすい青、ボタンは明るい水色から青へのグラデーションです。以前使っていた紫を基調にした配色には戻していません。
イラストの塗りは、光沢のある白と、透ける水色の光を基本にしています。アニメのセル画に近い温度感です。粘土のように丸めた立体や、画面を横切る光の線は使いません。
背景は白、またはごく薄い水色にしています。キャラクターの白と青が埋もれないようにするためです。
写真のようなリアルさや、ゲーム画面のような強い立体感は狙っていません。線と面で形が読めること、青が同じ温度であることを優先しています。
小さいアイコンでも、大きいイラストでも、塗りの方向は同じです。サイズが変わったときに別のキャラクターに見えないようにするためです。
今後のNews画像について
お知らせのアイキャッチも、これからペンゾーと同じ塗りの方向に揃えます。
技術の話題でも、会社からのお知らせでも、絵の温度をバラバラにしない、という方針です。記事ごとに画風が変わると、同じサイトの更新だと分かりにくくなるためです。
共通の目安は、次のとおりです。
- 白いボディ、黒いバイザー、縦の青い目、胸の青い宝石を崩さない
- アニメ寄りの塗り（光沢のある白、透ける水色、やわらかいハイライト）
- 背景は明るい白か、ごく薄い水色
- レーザーのような光の線や、粘土のような立体感は使わない
キャラクターそのものを、すべての記事に出す必要はありません。図解や概念の絵でも、色味と塗りの温度をペンゾーに合わせます。別世界の絵柄にはしない、というのが基準です。
今回の記事の画像は、その第一弾です。今後の更新でも、同じ方向で揃えていきます。
見つけ方
ページを開いたとき、タブのアイコンがペンゾーになっていれば、このサイトです。
本文の中では、青い宝石と縦の目が目印です。小さめに置いてある場所もありますが、かたちは同じです。
英語表示に切り替えても、絵はそのままです。文言は言語に合わせて変わりますが、案内役の見た目は共通にしています。
変わっていないこと
見た目の案内役が増えただけで、仕事の中身は変わっていません。AI、Webシステム、スマホアプリの設計と開発、既存システムの引き継ぎや改修は、これまでどおり受けています。
相談の窓口も同じです。見積もりの依頼とお問い合わせは、各ページのボタンから送れます。ペンゾーの登場に合わせて料金体系を変えた、ということもありません。
記事のカテゴリも従来どおりです。サイトの更新や営業案内は「お知らせ」、技術のメモは「技術」です。今回の記事は、サイトからのお知らせです。
画像を差し替えたページでも、リンク先や問い合わせ先は変えていません。ブックマークしている方は、そのまま同じURLで開けます。
まとめ
サイトの案内役として、ペンゾーが登場しました。
ページを移動しても同じ顔がいることで、「同じサイトを見ている」と感じやすくしています。今後のNews画像も、同じ塗りの方向で揃えていきます。
Makoto Tejima では、AI・Webシステム・スマホアプリの相談を受け付けています。費用の目安や進め方など、まずはお気軽にご相談ください。
