未分類

メルマガ配信システム「Benchmark Email」レビュー

「Benchmark Email」レビュー

私たちも活用しているメールマーケティング。そのメールでのマーケティング活動に欠かせないのがツールです。

今回、社内のメルマガ配信システムの見直しにつき、新たに導入した「Benchmark Email」についてレビューいたします。

続きを読む

いまの時代を生き抜くWebデザイナーの仕事

Webデザインイメージ

先月WordPressのサービスサイトをリニューアルいたしました。

リニューアルの理由は、4/21に行われたGoogleの仕様変更に合わせて
スマートフォン対応させたという感じです。

現状アクセス解析を見ると、PCとスマホの比率は 8:2程度 でしたが、早め早めに対策が肝心ですからね。

続きを読む

すげえキーボード「RealForce」の口コミ・レビュー

すげえキーボード

突然ですが、プログラマーのみなさんはどのようなキーボードをお使いでしょうか?

キーボードに「こだわり」などがありますでしょうか?

プログラマーが使うキーボードは
シェフが毎日包丁を使って料理をするようなもの

僕もプログラマーですので、毎日キーボードを使ってプログラムを打ち込みます。

この単純な「キーボード」という道具ですが、僕は「ハンパないこだわり」を持っています。

続きを読む

プロジェクト管理してますか?便利ツールのご紹介

プロジェクト管理

本日は外注様を活用して制作やプロジェクトを進めている方に向けて実際に使ってみて良かったツールなどに関しての記事を書いてみました。

外注さんに依頼する内容が増えてきたり、また各案件における要件が増えてきたりすると、案件毎の管理がとても面倒になってくると思います。

そこで今回はそんなプロジェクト管理を助けるツールを、いくつかご紹介させていただきます。

続きを読む

Illustratorから綺麗にWebサイト向けのスライスを作成する

今回はwebデザイナーさんやコーダーさん向けのネタとして、Illustratorから綺麗にwebサイト向けにスライスを作成する方法についてです。

僕の知り合いのコーダーさんでも意外と知らなかったことでしたので、今回のテーマにしてみました!

Illustratorを使ってウェブサイトのデータを作成している、といったデザイナーの方は現在でも多いと思います。

しかしながら、Illustratorにスライスを設定しても、書き出しを行う際に1pxズレてしまったり、指定したサイズと違う大きさの画像がスライスされてしまったりり、Illustratorでのスライスはお世辞にも使いやすいとは言えません。

そこでよく利用する方法が、Illustratorから画像を書き出し、Photoshop上でスライスをすると言う方法です。

この方法であればPhotoshopのスライス機能が使えるため、ピクセルのズレなどを全く気にせずにスライスを行うことができます。

ですが、Illsutratorから書き出した画像に問題が起きる場合があります。
具体的には、「文字」や「細い線」などが太ったり、アンチエイリアスが切れたようにジャギーがかかってしまうのです。

そのため、Illustratorから直接書き出した場合と、画像のクオリティが大きく違ってしまうと言うことになります。

実は、このIllustratorから画像を書き出す方法にコツがあったのです。

最初にIllsutratorから全体の画像データを書き出す時に、画像ファイル形式の選択ができるようになっているのですが、ここはデフォルトで「PNG」ファイルとなっており、このまま書き出してしまうと、上記のようなジャギーが発生します。

また、書き出しをする時に「アンチエイリアス」の処理を設定する箇所がありますが、PNGファイルの場合どの設定になっていても、ジャギーがかかってしまうようです。

そこでどうすればよいかというと、PNGファイルではなく「PSD」ファイルで書き出しをしていただくと、文字のアウトラインが綺麗に出力されるようです。

PSDファイルを書き出す際のアンチエイリアスの設定は、「文字に最適」としてください。「アートに最適」などとなっていると、P`NGファイル同様に文字が太くなったり、
ジャギーが発生する原因になるようです。

まとめますと、

1. Illustratorから全体の画像を出力するときは、PSDファイルで出力する
2. アンチエイリアスの処理を「文字に最適」で行う

として頂きますと、Illustoratorから綺麗に書き出しができます。

もし、Illustratorからの書き出しでお悩みの場合、こちらの設定を試してみてください。

トミーがレスポンシブデザインを斬る!後編

前回に引き続き
レスポンシブデザインについて
語っていきたいと思います。

▼WordPress上でのレスポンシブデザイン

WordPress上でもデフォルトのテーマなどはレスポンシブデザインに対応し、積極的に利用しているサイトが増えています。

僕らがお客様からいただくご要望の中にも「レスポンシブデザインでお願いします」というのが非常に増えておりますが、デメリットの部分も含めると、安易にお勧めできません。

そこで僕らが提案しているのが、

「PC向けとスマフォ向けのテーマを用意する。」

という方法です。

WordPressでは

「アクセスする端末ごとにテーマを使い分ける。」

ということを簡単に実現することができます。

具体的にはAというPC向けのテーマと、

Bというスマフォ向けのテーマを用意しておいて、

アクセスしてきた端末がPCならばAのテーマをサイトに適用し、スマフォならばBのテーマをサイトに適用する。

という単純な方法です。

テーマファイルをPC向けとスマフォ向けに2つ作成しなくてはならないという
面倒な部分もありますが、レスポンシブデザインのデメリットに挙げた項目を、ほぼ全て払拭することができます。

PC向けとスマフォ向けで別々のHTML構造を用意することにより、

例えば高解像度で巨大な画像ファイルをPCで扱っていても、スマフォでは、プログラムで画像をリサイズすることで、ファイルサイズを圧縮して表示させることができます。

コンテンツの出し分けも同様で、PCでは200文字を表示させるが、スマフォでは
50文字しか表示しない、などとということが簡単に実現できます。

各デバイス向けのソースコードには、他のデバイス向けのソースコードは一切含まれないので、

スマフォ向けテーマなどモバイル環境からのアクセスを想定する場合は、非常にシンプルなコーディングにしておくことで、3G回線などの速度の遅い回線でもアクセスのしやすい環境を構築することができます。

またデザインのワークフローでも、レスポンシブデザインのように共通のデザインや、共通のコンテンツ部分をソースコードレベルで意識する必要がないので、自由にデザインができることもコストの削減につながります。

さらにこの手法では、スマートフォンユーザーが

「PC向けの画面を見たい」

といった場合にテーマを切り替える
インターフェースをつけることで、簡単に実現することが可能なため、ユーザービリティにも配慮したサイトにすることが可能です。

そうなってくるとワンソースマルチデバイスというメリットが全くないじゃないか!

と言われてしまいそうですが、ワンソースマルチデバイスのそもそものメリットは、
プログラムを使わない静的なサイトが、

「1つのHTMLソースで複数のデバイスに対応できる」という点であり、ユーザーの目線ではなく開発者目線でのメリットです。

これは、プログラムを利用できる環境ではメリットにはなりません。

なぜならば、プログラムを利用することで表示領域の制御や、画像サイズの制御などは、CSSなどでやるよりも簡単にできてしまうからです。

また「1つのソースを複数のデバイスに最適化する」という意味では、ソースの指す部分をHTML構造ではなくコンテンツの内容とするならば、こちらの方が利用するユーザーの目線に立った、本来の意味でのレスポンシブデザインではないかと思います。

トミーがレスポンシブデザインを斬る!前編

昨今のスマートフォンの普及率については、
ウェブサイトを作成する上ではスマートフォン対応はほぼ必須となってきました。

そこで数年前より注目されている、
レスポンシブデザインについて改めて説明したいと思います。

▼レスポンシブデザインとは 〜まずは基礎から〜

レスポンシブデザインとは端的に言えば、
1つのHTMLでPC、スマフォなど複数のデバイスに対応できるデザインのことです。

一昔前のサイトであれば、アクセスしてきた端末の情報から、プログラムで「OS」「ブラウザの種類」などを取得して判定し、プログラムで出力するデザインを切り替えるようなものが主流でした。

レスポンシブデザインの画期的なところは、
一切のプログラムを使わずに、CSSだけでこれが実現できるところです。

具体的には「メディアクエリー」という仕組みを用いて、
■「画面の幅が○○ピクセル以下になったら、このスタイルを適用する」
■「画面の幅が○○ピクセル以内だったら、このCSSを読み込む」

といった、画面の幅や高さを条件に適用するスタイルシートを変えることで、スマートフォンや、そのほかのデバイスに対応するといったものです。

▼レスポンシブデザインのメリット 〜トミーが感じるメリット〜

レスポンシブデザインのメリットは、ワンソースマルチデバイスを実現できることです。

読み込むCSSを変えていろいろなデバイスに対応するため、1つのHTMLだけで実現ができるということです。

これはGogoleからも推奨されている方法で、Googleがインデックスを作成しやすくなったり、クロールの効率が上昇するため、SEO上も効果があると言われています。

さらに、複雑なプログラムを利用する必要がなく、CSSだけの知識で対応することができるので、今までプログラムを利用したことのない制作者でも対応できます。

静的なHTMLのサイトにも後付けで導入することができ、上記のようにプログラムの設置もいらないため、非常に導入がしやすいというのもメリットです。

▼レスポンシブデザインのデメリット 〜トミーが斬る〜

プログラムがいらないことやHTMLレベルでワンソースマルチデバイスに対応できることから、非常に注目を集めているレスポンシブデザインですが、メリットばかりではありません。

まず1つは、どのデバイスでアクセスした場合も、すべてのソースコードを読み込んでしまうという点です。

たとえば画像などが良い例で、PC向けに高解像度で作った写真をサイトに配置していた場合、レスポンシブデザインではCSSを用いて画像の見た目の大きさを変更したり、非表示にするといったことしかできないため、実際にはすべてのデータを読み込む必要がでてきます。

端的に言えば、必要のない画像やHTMLソース、CSSなどをすべて読み込むため、3G回線などの転送速度が遅い回線を使っている場合、ネックとなる可能性があります。

もう一つは、デザインが非常に面倒ということです。
レスポンシブデザインにするということは、PC向けの画面もスマフォ向けの画面も、ある程度構成やデザインなどは同一にしなくてはなりません。

特性上、HTMLのソースコードは1つなので、それを如何にCSSで制御するかと言うことになるのですが、PCはPC向けの構造を用意して、スマフォで見たときはそれを非表示にする。

スマフォはその逆、といったように完全に別々の構造を複数用意してしまうと、上記の理由から転送速度の低い端末ではアクセスしづらいサイトとなってしまいますし、かといって同一にしすぎてしまうと、各デバイスへの最適化という部分が実現できなくなってしまいます。

そのため、デザインの設計段階でどこまでを共通化するか、どこをデバイスごとの差別化とするかを詳細に検討し、その上でデザインを行う必要があります。

各デバイス向けにコンテンツの出し分けがしにくいというのもあります。

PCはPC向けのコンテンツ、スマフォはスマフォ向けのコンテンツを1つのHTMLに入れ、CSSで表示・非表示を制御すると言ったことでは、結局のところ「ワンソースマルチデバイス」である必要性がありません。

同じコンテンツを複数のデバイスで
共通して利用できるところに価値があるのであって、そこを誤解してしまっては、そもそもの価値がなくなってしまいます。

ユーザービリティでも一部問題が発生します。

CSSで実現するレスポンシブデザインは、画面の横幅を絶対的な条件としてデザインを切り替えるため、スマートフォンの画面からでは、絶対にPC向けのデザインを確認することができません。
(画面の解像度を変えることができるならば別ですが・・)

スマフォからでもPC向けのデザインを利用したい!
というユーザーがいたとしても、強制的にスマフォ向けの画面が表示されてしまうため、利用する手段を提供することができません。

〜トミーがレスポンシブデザインを斬る!後編に続く〜

次回は「WordPress上でのレスポンシブデザインについて」
記事を書きますね。