SUBMONTANE STUDIOができるまで(企画・デザイン編)

なぜ屋号を変えるの？

当事務所はfab.jpとして、2015年7月の開業以来、フリーランスのWeb制作事務所として活動してきました。

元々のfab.jpという屋号名は、

• 個人的に好きなThe Beatlesの愛称「Fab Four」から
• 「すばらしい」を意味する「fabulous」の略語
• ちょうどいい感じのドメインをドメインオークションで落札できた

などの理由から付けた屋号でした。

しかし、この屋号を使っていくにつれ、いろいろと問題が発生しました。

• fab.jpという短い屋号ゆえググラビリティ（検索しやすさ）がすごく低い
• 「fablication」のfabと勘違いされ、製造系の事務所だとの勘違いが発生する

1番目は検索エンジン対策等でどうにかなりますが、2番目は（それこそかなりのメジャーにならない限り）どうしようもありません。もちろん、これは私の調査不足が原因なのですが…

なので、いっそのこと屋号を変更するということをかなり前から考えてはいたのですが、結局軌道に乗る前に仕事が多忙になったり、そもそもいい屋号が浮かばない…とぐだぐだとしているうちに月日が経ち、今回の屋号変更・公式サイト公開へ向けて本格的に着手したのは去年でした。

SUBMONTANE STUDIO

SUBMONTANEという英語は多くの方には聞き慣れない言葉だと思います。「SUBMONTANE STUDIO」は、「山麓（さんろく）」を意味する英語からインスピレーションを得ています。私は、クライアント様のビジネスを支える堅実な基盤として、その成長を力強くサポートする存在でありたいと考えています。（山下という私の名前にもピッタリかと思っています）

没案いろいろ

と、すんなり決まったかのような書き方でしたが、実際はそうではありませんでした。採用しなかった一部没案を例示すると、

• BOUNDLESS(競合に米Yahoo!の日本法人が参入してきたので泣く泣く廃案化
• Wardenclyffe (綴りが難しすぎる！)
• Marksman(マークアップを主に案件を受注していたときのもので、意味は軍隊において小隊と共に活動し、普通の歩兵より遠い敵を素早く排除する役目を持った兵士のことですが、さすがにあまり関係のないWeb制作で軍事的な用語の屋号はどうか、となりボツ）
• Ampersand(競合とはいえないまでもそれに近い他社さんが使用しているとのことでボツ)

といった具合で、進んでは戻り戻ってはさらに戻り、といった状況が数年間続いておりまして、やっと固まったのが去年でした。

デザイン

今回、最終的に使用したのはFigmaでした。 なにせ、数年間グダグダと進めていたので、デザインツールもPhotoshop、Sketch、XDからFigmaへと転々としました。

Figmaを使用して良かったところ

同期がいらない！

これは一長一短な部分もありますが、FigmaはWebベースのアプリケーションなので、一度デザインしてしまえば、すべての端末で反映されます。 「あっ、あそこ変えたけど同期するの忘れてた！」と別端末を開いてから思い出すことがありません。 Dropboxを使用すれば他でもほぼ同じことができますが、保存→アップロードというステップを踏むため、保存して満足してしまってすぐパソコンをシャットダウンしてしまうと、アップロードができていないということが頻発しがちです。

Figmaではオンライン上で完結できる（ブラウザベースのクライアントはある）ので、同期に関する問題はほぼなくなります。

レスポンスも快適

オンラインツール特有の不安点としてレスポンスの問題がありますが、今の所特別レスポンスが悪い、動作が遅い、と感じたことはありません。

Figmaのダメだったところ（？）

非Adobeなショートカット

ここはFigmaが優れている・劣っているという話ではなく慣れの問題です。

FigmaはAdobeへの買収話があったものの（結局頓挫）、今に至るまで非Adobeツールということもあり、ショートカットがAdobe系のXDやPhotoshopとは違います。 私は学生時代からAdobe Photoshop / Fireworksを使用してきたのもあり、「⌘スペースで拡大」操作が我が身に染み込んでいたので、ここはかなり苦労しました。

ちなみに、MacではKarabiner-Elementsと組み合わせて⌘スペースで拡大するように変更させることが可能なようです。

【解決】Figmaでも⌘+spaceで範囲ズームしたい！
https://sttk3.com/blog/tips/figma/areazoom.html

デザインで気にしたところ

アクセシビリティ！アクセシビリティ！アクセシビリティ！

今回のデザインで最も重要視したのはアクセシビリティです。

具体的には

• WAI-ARIA対応
• 色覚障がいを持つ方でも問題なく利用できるよう、色覚シミュレーター「Color Oracle」による色のテスト
• スクリーンリーダーによるテスト
• UD角ゴ、BIZ UDゴシックなどのUDフォントの使用

を行っています。

ブログは違うデザインで

ブログページとその他の下層ページでは、意図的にデザインのテイストを変えています。 ブログページでは、読みやすさを第一に考えてデザイン上の要素を極力廃しています。

デザイン上の課題

WAI-ARIA・スクリーンリーダーへのさらなる対応

WAI-ARIA、スクリーンリーダー対応はまだ完璧に対応できているとはいえません。逐次対応していく予定です。「No ARIA better than Bad ARIA（ARIAなしは悪いARIAに勝る）」という言葉もあるそうですので、特にWAI-ARIA関係はあまり過剰にしすぎず慎重に対応していく必要がありそうです。

BIZ UDPフォントの太字がわかりにくい

BIZ UDPフォントは通常の400と700の二種類の太さが用意されていますが、太字の700が400とそれほど変わらない太さなので、わかりにくい気がしています。
Noto Sans Japaneseで言うところの600の太さが700とされているイメージです。

企画・デザインに関しては以上です。

次回の記事ではSUBMONTANE STUDIOができるまで(技術編)（選定編）と称して、今回新たに導入したTypeScript、Next.js、CloudFlare Pagesなど裏側のお話を予定しております。