フラットなデザインの英語サイトを日本語にしてみる実験

以前から流行っているフラットデザイン。ネットで色々な記事を見ますが、お手本とされるサイトで使われている言語は基本的に英語です。そこで、フラットデザインを日本に取り入れる際の懸念としてあるのが「英語だからかっこつくけど、日本語だとどうもねえ」というものです。日本語のサイトは和文と欧文が混在するので、フラットデザインにおいて重要だと言われるタイポグラフィの部分が英語のみのサイトよりどうしても難しくなってしまうというのはあると思います。

で、今回はお手本とされているフラットデザインのサイトの言語をそのまま日本語に置き換えたらどうなるんだろう」という個人的な興味の元の実験(?)です。ちゃんとした結論があるわけでは無いですが、ネット上でこんな試みを今のところ見かけなかったので、やってみました。

実験方法

実験方法といっても、ただフラットデザインのサイトを日本語に直して SS 撮ってるだけなので、画像が見たい方はこの項目は飛ばしてくださいー(スクリーンショット撮るって日本語おかしいのかな)。

対象サイト選び

今回、対象にさせていただいたサイトは、PhotoshopVIPさんの フラットデザインの定番トレンド配色 + お手本Webサイトまとめ に載っていた16サイトです。

英語を日本語に置き換え

候補の16サイトを Chrome の翻訳機能を使って、英語を日本語に直します。不自然な訳の箇所が多いですが、Lorem ipsum みたいな感じで雰囲気が掴めればと思います。ここで、翻訳できなかったサイトは候補から外します。

スクリーンショット撮影

Screen Capture という Google 製の Chrome の拡張機能を使って、サイト全体のスクリーンショットを撮影します。ここで、撮影がうまくできなかったサイトは候補から外しますが、多少の崩れは許容します(確かパララックス効果を使ったサイトがうまく撮れなかったはず)。で、ImageAlpha を使って画像のサイズを減らして完成。

実験結果

「実験結果」なんて大仰な表現ですが、気にしないでください(笑)。英語を日本語にしてみた結果は以下の通りです。元サイトへのリンクもありますので、アクセスしてみるとより違いがわかりやすくなると思います。

Friends of The Web, LLC
Friends of The Web, LLC
Geckoboard
Geckoboard
KIN HR
KIN HR
Combadi
Combadi
Jake Giltsoff
Jake Giltsoff
oak.is
oak.is
DesignZoom
DesignZoom
Concrete Matter
Concrete Matter

まとめ?

フラットデザインだからということに限らないのですが、元のサイトと日本語に置き換えたサイトを見比べると、文字の配置の仕方が日本語と英語で異なることに改めて気付かされます。英語は段落内の文頭は基本的に単語です(長い単語をハイフンで繋ぐ例外はありますが)。日本語も段落の1行目の頭は基本的に何かしらの単語ですが、2行目以降はそうとは限りません。この違いによって、タイポグラフィが重要とされるフラットデザインを日本語で行うが難しくなっているということなんでしょうか。

日本語で段落の頭を全て単語ではじめるには、文章をより簡潔にして、句点が来たら br要素を使って強制的に改行するとかでしょうか。でも、文字サイズやウィンドウサイズを可変されると、望まぬ箇所で改行されてしまってより不恰好になってしまう可能性もあります。うーん、難しい。

SVG がうまく表示されない場合は、サーバーの設定を確認してみる

いつものように、詰まった作業に関しての個人的な備忘録。今回は、ブラウザで SVG がうまく表示されなかった際には、サーバーの設定を確認してみましょう、というお話。

詰まった箇所

このブログのフッターにある各サービスへのリンクのアイコンを SVG 形式にしてみようと思い、Retina対応にSVGを使う方法とリンクを張る時の注意点 | Dress Cordingというページを参考にローカルで作業。問題なく表示されたので、本番環境(ロリポップ!)にアップしたところ、何故か何も表示されない。フォールバックの PNG ファイルもダメ。ローカルで OK で、サーバー上で NG ということは、サーバー関連の問題かなあと検討をつける。

過程

とりあえず、今利用しているロリポップ!で何かしらの作業が必要かなと思ってググったところ、こんなツイートを発見。

ということで、SVG の MIMEタイプを調べることに。ベクター形式でWebページ上に表示できるSVGでロゴを描いてみた | SUSH-i LOGというページで SVG の MIMEタイプをサーバーに設定するには、以下の記述をした .htaccessファイルが必要であることを確認。

AddType image/svg+xml .svg
AddType image/svg+xml .svgz

ちなみに、.svgz って何だろうと思って調べたところ、SVG 形式を gzip で圧縮したものということ。gzip 形式って前に何かで見たけど詳しく調べてなかった。今度、調べよう。

で、ロリポップ!で借りているサーバーに、SVG の MIMEタイプを設定してあげるために、ロリポップ!のマニュアルを参考にして、.htaccessファイル作成。上記の内容を記述したファイルを txt 形式でサーバーにアップロード、場所は色々なところで SVG を使うかもなので、ルート直下に配置。こうすることによって、自分が借りているサーバー内では、全てのページで SVG が表示されるようになるはず。ファイル名を「.htaccess」に変更して、パーミッションを 604 に設定して完了。

作業完了後、あらためてサイトを本番環境(ロリポップ!)で確認したところ、ちゃんと SVG が表示されていました。

まとめ

SVG がローカルで表示されて、本番環境で表示されない場合は、サーバーの設定を確認する。MIMEタイプに SVG(SVGZ) の設定がない場合は、.htaccess を作成して設置する。

自分用 Sass 情報まとめ(2013-03-30 現在の情報です)

Sass のアップデートでググることが何回かあったので、まとめておきます。それと、導入の方法も忘れてたので一緒に記述。あとで見て何書いてあるか思い出せるように、丁寧に書いておきます。
※Mac ユーザーなので、Ruby のインストールは割愛です、ごめんなさい。

Sass 準備

全部、Terminal での作業になります。

Ruby のバージョン確認

$ ruby -v

Ruby のアップデート

$ sudo gem update --system

Sass のインストール

$ sudo gem install sass

Sass のバージョン確認

$ sass -v

Sass のアップデート

$ sudo gem update sass

Sass 導入

sassディレクトリの準備

作業する用のディレクトリの下に、sassディレクトリを作成。ディレクトリ名は「scss」でもok。

scssファイルを作成

作成したディレクトリに、.scssファイルを作成

作業する用のディレクトリのルートへ移動

Terminal 上で、pwd(現在のディレクトリ確認)とcd(ディレクトリ移動)を駆使する

ファイルの監視を開始して完了

$ sass --watch sass:css

出力スタイルの指定

公式のドキュメント見れば事足りるけど、一応書いておきます。

元の.scssファイル

header {
    width: 100%;
    h1 {
        font-weight: bold;
    }
}

:nested

$ sass --watch sass:css --style nested

header {
  width: 100%; }
  header h1 {
    font-weight: bold; }

:expanded

$ sass --watch sass:css --style expanded

header {
  width: 100%;
}
header h1 {
  font-weight: bold;
}

:compact

$ sass --watch sass:css --style compact

header { width: 100%; }
header h1 { font-weight: bold; }

:compressed

$ sass --watch sass:css --style compressed

header{width:100%}header h1{font-weight:bold}

このくらい丁寧に書いておけば、後で読み返してもわかるはずー。