工房周囲の水田では10日ほど前には、ほぼ田植えが終わっています。
今日から水無月・6月ですね。

田んぼに囲まれた工房・自宅では夜になるとどこからともなく湧いてくるようにさかんに蛙の鳴き声が響き、睡眠障害になるほど(ウソです。床に付くとバッタン、キューです)。
早苗が徐々にその長さを高くし、青々としてくる頃までの辛抱ですね。
それでもなお鳴き続ける奴は、パートナーを見つけられなかったロンリーフロッグ、ということになるのかな。
そのような場合、早く相手を見つけられるよう影ながら応援してやってください。

今日は、このサイトの仕様について、少しお話ししましょう。

Topページを含む共通の仕様

サイズについて

横幅のサイズは950pxです。
旧サイトは720pxでしたので3割増ということになりますね。

Topページは横幅いっぱいの動的画像が表れますので、やや大きいな、という感を受けるかと思います。
ところで、現在では主要な企業のWebサイトの多くが1,000px前後というのが一般的なようです。
これはモニターが17インチの場合、一時代前の解像度ですと、1280×1024 あたりですので、この解像度に見合うサイズということになるのでしょう。
因みにApple.incの公式サイトの場合、980px〜、Microsoft Japanの場合は950px、首相官邸は950pxですね。(そんなところと較べてどうなん? 笑)
つまり、950pxというのは極めて一般的なサイズと考えていただけるでしょう。

縦の長さは、当然ですが様々になりますね。
できれば、あまり長くしたくないので、1つのコンテンツを分割してページレイアウトするよう心がけたいと考えています。
とは言っても、まだこのページナビは未導入。

WordPressそのものですと、Blogで経験がありますので簡単なのですが、このWebサイトの場合、いわゆる時系列のコンテンツをページ区分けするのとは異なりやや難しく、研究しなければなりません(ご存じの方がいらっしゃればご教示願いたいです)

しかし、適宜、記事の区切りにTopに戻らせる罫線を置きますので、これを活用してください。

画像のサイズについて

Topページの動的画像の場合、横幅一杯に流していますが、My Workなどのページの画像は640pxで収めてあります。
画像によっては、クリックすることで800〜1,000pxに拡大可能なものもあります。
つまり、Max:1,000pxということになります。

ただ大きなものでもファイル容量としては75KB〜150KB(いずれも72dpi)ほどに圧縮していますので、ストレス無く表示できるものと思います。

カラー設計

ページの背景はお気づきかも知れませんが、少し色を付けています。
RBG表示で#fbfbf8 という色です。
ややグリーン掛かったセピア調といったところ。
真っ白では目が疲れますので、トーンを落としたというところです。

トーンを落とす、ということでは、フォント基本色、あるいは工房 悠のロゴなども同様です。
ケバいのは似合いませんし、クールにいきたいですからね。

ただ、普段私はiMac 27″ LCD(2560×1440px, コントラスト比1000:1)モニタでチェックしながら作っているのですが、先日Windowsでの確認のため、24″のDellで視認したのですが、そのあまりの汚さに愕然 !
怖ろしい体験をさせられたのでした。

コントラストが稼げないために、中間色の美しさが全く映えておらず、がっくりしてしまったのです。
耐えがたいものがあります。
Macのモニターの驚くほどの美しさには定評があるとは言え、これほどまでの差があるとは信じがたいほどのものがありました。

ただ市場シェアは圧倒的にWin勢が優勢ですので、等閑視するわけにもいかず、少し見直しが必要なのかも知れません。

なお、リリース時から5日ほど経過した先週末、リンク埋め込みのテキスト色を変えました。
当初は橙色だったのです(元々の仕様)が、あまりに鮮烈ですので、Web標準の青色系でトーンを落とした色にしました。
同時に、下線が表れるようにも改編しています。

元々の仕様は、英語をベースとしたもので、フォントサイズなどは日本語にするとチグハグになってしまう場合も多く、かなりの部分で修正を加え、見やすくしたつもりです。

またカリグラフィーというのは、こうした文章表現の場合とても重要な要素となるのですが、因みにこのサイトの場合、H1を〈パピルス:papyrus〉というフォント種でマークアップしました。
Winで正しく表示してくれるか不安ではあったのですが、この〈papyrus〉、MS Officeに標準添付されており、思い通りに表示してくれていてほっとしたものです。

この項続きます。