Webデザイン
多くの人にとって、御社について最初に知る実体は Webサイトです—打ち合わせの前、提案の前、応募の前に。 当社はその瞬間に値するサイトを、日本語と英語で設計し、 御社が自分のものとして持てる形でお渡しします。
かかっているもの
公平ではありませんし、なくなりもしません。訪問者は到着からわずかな時間で、レイアウト・余白・タイポグラフィから御社への見方を形づくります—なぜ時間を割く価値があるのかを説明した段落にたどり着くより、ずっと前に。場当たりに見えるサイトは、その背後にあるものまで場当たりに見せてしまいます。
関連づいた一組として一度だけ決め、あとは使い回します。整って見えるページと、見出しをその都度それらしくなるまで動かしたページの違いはここにあります。この段落の上にある見本が、このページで実際に使っているスケールです。
余白は決まったスケールから取るので、ものとものの間隔が意味を持ちます。関係の近いものは近くに、セクションは息をします。テンプレートのサイトが最初に崩れるのはここで、読む側は理由を言えないまま「安っぽい」と受け取ります。
文字と背景の組み合わせは、目視ではなくWCAGに照らして確認します。Robo Lab自身のパレットがそれを記録しています—ボタン用の#0079CBは白に対して4.57:1、本文用の#006FBAは5.29:1。青を二つ持っているのは、一つの数値では両方の役目に足りなかったからです。
訪問者は、一文字も読まないうちに、このページが何をしてほしいのかが分かるべきです。それを担うのは大きさ・太さ・余白であって、より大きなボタンやより派手な色ではありません。
因果が見える動きを、移動距離に見合った時間で。そしてシステムが「動きを減らす」と伝えてきた人には、完全に止めます。飾りとしてのアニメーションこそが、サイトが重く感じられ始める入口です。
1行の長さを抑え、行間をゆったり取り、画像に焼き込んだ文字ではなく本物のテキストで。読みやすいページは検索でも有利ですが、それ以上に、実際に読まれます。
見本
スクリーンショットは、誰かの画面でそのページがどう見えたかしか伝えません。そこで、いま読んでいるこのページを支配しているスケールをそのまま出します—6つのサイズ、1つの関係、どこでも同じもの。このページには、それらしくなるまで動かした値は一つもありません。
見出し
セクション見出し
小見出し
導入の段落
本文。日本語は1行あたり40字前後で組みます
キャプションと補足
枠を変えて、レイアウトが組み替わるのを見てください。ウィンドウではなく枠そのもののサイズに反応しています。実際のページを、どの幅でも単に縮めるのではなく整った状態に保つのは、この手法です。
480pxを超えれば3列、下回れば2列、スマートフォンでは1列。文字が小さくなるのではなく、構成が変わります。
最初から二言語
言葉を訳すのは簡単なほうの半分です。日本語は行間を広く取り、区切るための空白がなく、指定しなければ語の途中で改行されます—丁寧に組んだ英語のレイアウトが、日本語で崩れて見えるのはこのためです。下は同じ段落を両方の言語で、このサイト自身のルールを適用して組んだものです。
Robo Lab designs and builds websites that are fast, accessible and straightforward for your own team to maintain after launch.
ラテン文字は空白で改行できるため、ブラウザに任せられる部分が多く、適切な字詰めと行間がほぼすべてです。Robo Labは、表示速度が速く、アクセシビリティに配慮し、公開後も自社で無理なく運用できるWebサイトを設計・構築します。
広めの行間、文節単位の改行（auto-phrase）、そして厳格な禁則処理。語が2行にまたがって割れることはありません。プロセス
誰のためのもので、その人たちがそこで何をする必要があり、何をもって成功とするのか。資金調達のためのサイトとエンジニア採用のためのサイトは同じ見た目であるべきではありませんが、たいてい同じになっています。
まだ変更が安いうちに、ワイヤーフレームでコンテンツと階層を決めます。ページが何を言うべきか分からないうちに色を選ぶことが、プロジェクトが高くつく経路です。
タイプスケール、余白、色の役割、コンポーネントを一度だけ定義します。そうすれば10ページ目も1ページ目と同じだけ考え抜かれており、11ページ目は当社に連絡しなくても御社のチームが足せます。
意味のある、アクセシブルなマークアップ。いちばん小さな画面から積み上げるレスポンシブ。あとから最適化するのではなく、作りとして速いものを。
公開は仕事の終わりではありません。残る2つが、当社をもう一度必要としなくて済む状態をつくります。
WordPressまたはWebflowを、御社のチームがレイアウトに触れずに—そしてうっかり壊せない形で—コンテンツを編集できるように設定します。
ソース、デザインシステム、ドキュメント、そしてトレーニング。成果物は完全に御社のものです。
所有権
安いWebサイトでいちばん高くつくのは、たいてい、作った人たち抜きでは変更できないと気づいたときです。
タイプスケール、色の役割、余白、コンポーネント—文書化された状態で。当社がいなくなったあともサイトが育つように。
御社のリポジトリに、御社のライセンスで。当社から借りるものではありません。
レイアウトを壊す心配なくコンテンツを編集できます。入力欄そのものが、壊れ方を制限しているからです。
公開前に慌てて—修正費用が5倍になってから—付け足すのではなく、最初のワイヤーフレームからWCAGを考慮します。
どう組み立てられ、どう拡張するのか。実際に保守する人たちに向けて。
お尋ねいただく前に
はい。それがCMSの工程を「おまけ」ではなく工程として置いている理由です。御社のチームがレイアウトを壊すことなく文言と画像を変えられるよう、コンテンツの入力欄を設計します。自社サイトを更新するのに制作会社へメールを書くしかないなら、それは本当に自社のものとは言えません。
両方あります。そして答えは、当社が作りたいものではなく御社の働き方から決まるべきです。チームが頻繁に、自分たちだけで公開する必要があるならWordPressやWebflow。CMSでは無理が出る動きをサイトがするなら個別実装。どちらなのかは、ご判断いただく前にお伝えします—安いほうが正解である場合も含めて。
これは翻訳作業ではなく、れっきとした設計の問題です。上のセクションがその要約になっています—日本語は行間を広く取り、区切るための空白がなく、指定しなければ語の途中で改行されます。英語向けに調整したレイアウトが日本語で目に見えて崩れるのは、そのためです。Robo Labは自社サイトを二言語で運用しているので、これらは調べて持ってくる知識ではなく、日々適用しているルールです。
訪問者が、自覚しないまま測っている唯一の品質です。遅いページは描画される前に離脱され、検索エンジンもそれに応じて評価します。当社が最初から速さを前提に作るのは、あとから性能を足すことが、遅さの原因になった部分を作り直すことと同じだからです。
市場と顧客によりますし、法的な見解を述べるのに当社は適任ではありません。申し上げられるのは、WCAGに沿って設計することが、キーボードで操作する人、拡大表示する人、明るい屋外で画面を見る人にとって、そのまま使いやすさになるということです。そして後付けは、最初から入れておくより常に高くつきます。
次に
何がうまく機能していて、何が訪問者を取りこぼしていて、作り直しが必要なのか、それとも3か所の具体的な修正で済むのかをお伝えします。後者で足りるサイトは少なくありません。