ゲーム霧とコンクリートご提案運営者
PLEN日本語
お問い合わせ

Czytam i piszę.

ワルシャワ近郊のコビウカにある診断・教育セラピーの相談室「Czytam i piszę(読んで、書く)」のウェブサイトです。読み書きの困難(ディスレクシア)のリスクを調べ、小学校低学年の子どもに個別のセラピーを行い、二人一組の造形ワークショップも開いています。相談室はまだ始まったばかりで、このサイトがオンラインでの最初の居場所です。

公開中のサイトを見る czytam-i-pisze.pl
Czytam i piszęのウェブサイトのファーストビュー。青い面に、子どもとその内側の世界について語る手書き書体の一文。その横に電話番号を収めた明るい枠、上にはクリーム色の帯とCの文字をかたどったロゴ。

火花

始まり

素材は一日で、しかも一式そろって届きました。6ページ分の文章、ロゴ、スポイトで拾った色コード付きのパレット、署名用の書体、本人の写真、そしてワークショップの作品写真です。

クライアントは最初から、何を望まないかをはっきり持っていました。アニメーションも3Dも使わないこと。ページは簡潔で静的に、色は彼女が選んだものだけを、暗くせずに使うことです。

文章は彼女のものが唯一の基準です。あるページは同じ日に5つの版が届いたため、サイトには最後の版を置き、少し長い文はすべて、送られたファイルに出どころがあります。

没入

つくり方

4つの案をつくり、それぞれをIskraのプレビューにパスワード付きのリンクとして置きました。クライアントはすべてを見て一つを選び、ページの特定の場所に紐づけたコメントを残しました。

レイアウトは彼女の色でできています。クリーム色の背景、彼女自身が文書で使っていたのと同じ書体で組んだ信条の青い帯、その下の手書きの署名です。ロゴのCの文字は見出しのそばに戻り、子どもたちの作品12点には専用のギャラリーを用意しました。

その後も数週間にわたって修正が届きました。新しい電話番号、住所と受付時間、ワークショップの名称、そして肩書きはトップページだけに。サイトは10版目に達しました。

実体

中のしくみ

各ページは選ばれたモックアップから生成した静的なHTMLで、フレームワークもビルドもありません。修正は完成したファイルではなくモックアップに入れ、ページを作り直します。フォントは配信元ではなく相談室のドメインから届きます。

Googleマップはクリックして初めて読み込まれます。それまでページはGoogleに接続せず、Cookieも保存しません。地図の下には同意を取り消すボタンがあります。あわせて、このフォームとこの地図のためだけに書いたプライバシーポリシーを置きました。

フォームはどのページにもあり、相談室のドメインのメールボックスに届きます。自動化された送信は、隠しフィールド、入力にかかる最短時間、送信元の確認で弾くので、画像の文字を書き写す必要はありません。JavaScriptがなくても通常の送信として動き、確認ページが返ります。

技術的な判断
コードに関心のある方へ
一つのモックアップから起こす静的HTML

スクリプトがモックアップのファイルからページを生成するため、修正は5つのファイルではなく一つの元に入れます。

フレームワークもビルドもなし

サーバーは完成したファイルを返すだけで、サイトはフレームワークのバージョンやその変更に左右されません。

関数と相談室のメールで動くフォーム

メールは相談室のドメインのメールボックスから送られ、返信先にはフォームに書かれたアドレスが入ります。

CAPTCHAの代わりに自動化対策

隠しフィールド、入力の最短時間、送信元の確認でボットを弾くため、保護者が画像の文字を書き写すことはありません。

クリックしてから読み込むGoogleマップ

クリックしなければページはGoogleに接続せず、同意は地図の下のボタンで取り消せます。

canonical、Open Graph、JSON-LD、サイトマップ

各ページに正規URLとシェア用の画像があり、相談室の情報は検索エンジンが理解できる形で届きます。