2015年7月 Archives

レビューサイトをいくつか運営しているのですが、先日、今まで撮影したレビュー画像をすべて修正する作業をしています。

スマホ対応のため、今までの画像の容量を圧縮する作業をしていたのですが、ついでに数年前に撮影したものを見てみると暗い画像がとても多いことに気が付いたのです。この間、カメラを２つぐらい買い替えたのですが、昔のカメラで撮影した画像はどれも暗いものが多かったです。

なので、Photoshop elementを使い、明るさなどを調整して再アップロードすることにしました。

この画像処理という点でいえば、通常のPhotoshopよりもelementのお手軽モードを使用した方が簡単です。私がいじる箇所は「スマート補正」と「露光量」、「レベル補正」そして「シャープ」なのですが、だいたい上から順に調整していくとハリのある明るいレビュー画像に修正することができます。

最初は「スマート補正」ばかりを利用していたのですが、画像によっては色合いが飛んでしまうため、最近は「レベル補正」を重点的に使用しています。「レベル補正」にも「シャドウ」や「中間色」などがありますが、主に暗い「シャドウ」の部分を明るくして、光の反射があれば「ハイライト」の箇所も調整して反射を抑えています。

あとは「シャープ」の箇所ですが、こちらはあまりやりすぎるとジャギーが発生してしまうため、ほんの気持ち程度使用するにとどめ、多少くっきりしたな程度の使用ですませています。

あとは出来た画像をスマホ用に圧縮してアップロードしていますが、スマホサイトでは320pxが限界なため、サイズの方も極力320px以内に抑えて使用するようにしてます。

ひととおり全ての画像を修正してみると、レビューサイトの印象が大幅に変わりますので、時間がある際には試してみるとよいかもしれません。

現在、ウェブサイトのレスポンシブ化を進めているところですが、tableタグを使い、表を作成しているページでの対応に憂慮する事態が生じております。

比較サイト等においては縦８列、横２０行ぐらいの表を使用していまして、各tdタグの間にpaddingなどを設定しているものですから、スマホで表示した際に横長になってくずれてしまうわけです。

スマホの横幅を横320pxと仮定しますと、８列の場合、ひとつの列のwidth幅が約40px分しか確保できなくなってしまい、文字が縦１行になって表示されてしまうのです。

この点を回避するため、１行で表示していたtrを、スマホで表示した時のみ途中で折り返してCSSで対応する予定だったのですが、この方法は不可能だという結論に達しております。
floatを設定してもだめ、trを二重に設定してもだめ、どうやっても無理でした。

つまり、私が試みたのは以下のような設定です。

■ＰＣ閲覧時は通常での表示

＜tr＞
td td td td td td
＜/tr＞

■スマホでの閲覧時は折り返して半分の横幅に

＜tr＞
td td td
td td td
＜/tr＞

これの実装は技術的に不可能と判断したため、途中で断念しております。

tableではなく、＜div＞などを使用すれば、スタイルシートの方で対応できることは知ってますが、文中に＜div＞を使うのはウェブ作成者として邪道と考えておりますので、別の方法を探ってみました。

そこで最終的に取り入れた方法は、tdを間引きすることで横幅を減らすという手段をとっております。

つまり、以下のような手法です。

＜tr＞
td td ＜td＝class"example"＞ td td td
＜/tr＞

などとしておき、cssのほうで.example {display:none}などと記述して、スマホで表示した際には簡略化した形で表示しようというわけです。

なので、ＰＣサイトよりも、スマホサイトの方が情報量が減少してしまいますが、この方法が一番よいのではないかと考えました。

ただ、一方で、スタイルシート側で強制的にコンテンツを非表示にするわけですから、SEO対策的に妥当なのかどうかという懸念があります。

いわゆる「隠しテキスト」みたいな形で判断されまいかという懸念がございますが、一応、ＰＣサイト上では完全な形で表示しておりますし、スマホへの対応は検索エンジン側でも推奨しているわけですので、このような使い方はまったく問題ないようです。

tableタグのレスポンシブ化でお悩みの方は、CSSで非表示にして、簡略化して表示させる方法もご検討されてみてはいかがかと思います。

ホームページを作成する際、テンプレートなどで配色のパターンを考えなくてはいけませんが、自分で考えるのは非常に時間がかかるものです。僕はうまいデザインのサイトに出会うたび、画像でキャプチャーしてコレクションしていますので、実際にサイトを作成する際には、その膨大なコレクションのなかから参考にすることもあります。

けれども、はじめて作成する際には、そういった参考になるサイトの蓄積はないと思いますので、配色の組み合わせを提案しているサイトから、違和感のない配色パターンをそのまま利用するのもひとつの方法かと思われます。そういったサイトは、著作権的な問題がクリアーされていますので、そのままホームページで利用しても問題ありません。

「color pallet」などで検索するといろいろヒットしますが、ユーザー参加型のサイトで、できあいの色の組み合わせが提供されているタイプを参考にしてみると便利です。

例えば、以下のようなサイトがヒットします。

■Color-hex
http://www.color-hex.com/color-palettes/

■coolors
https://coolors.co/

■COLOURlovers
http://www.colourlovers.com/palettes

また、自然に存在する美しい風景画像などを元に、配色の組み合わせをピックアップしているサイトもあります。

■design seeds
http://design-seeds.com/

■Color Palette Ideas
http://colorpalettes.net/

どちらかというと、後者の自然に存在する色彩の組み合わせからピックアップした方がしっくりした配色パターンになる印象があります。色彩学における理論的な面から機械的に配色を組み合わせるというのは、確かにぶなんな配色にはなりますが、そこに魂を揺り動かすような感動はありません。

配色の美しさは自然のうちに宿るものだと思いますし、美しいと感じる人間の感性を通すプロセスが絶対に必要なのではないかと考えております。もし、ホームページの配色のデザインで迷った際には、ネット上で美しいアーティスティックな画像を検索し、そこから色彩コードを抽出する方法で組み合わせを考えるとよいと思います。

ホームページ作成の基本として「HTML＋CSS」の習得があげられますが、この二つはセットになっており、両方の知識がないとサイトを作成することはできません。一方で、JavaScriptの習得は必須ではないものの、こちらもウェブ作成における重要な要素といえます。

使用方法としては、「HTML＋CSS」で作成したサイトの一部として、JavaScriptを使用するというニュアンスになります。メインディッシュが「HTML＋CSS」とすれば、JavaScriptはスパイス的な要素ともいえるでしょう。

「HTML＋CSS」 > JavaScript

サイト内で画像を順番に表示させたいとか、あるいは広告を表示させたいとか、アラートを表示させたいとか、JavaScriptは「HTML＋CSS」のサイト本体があってこそ成り立つものですので、JavaScript単体では機能しません。

■JavaScriptの利点

JavaScriptの利点は、サイト内の１部のみを独立させることが出来る点にあります。

例えば、サイト内で文章と100枚の画像を表示させる場合、１ページに１枚づつ画像を貼り付けると100ページ分が必要になってしまいます。また、１ページに100枚を貼り付けるとすると読み込みに時間がかかりますし、表示するにはサムネールなどを使用しなくてはいけなくなります。

そのような時、画像をJavaScriptで表示させるようにすれば、ボタンなどを使用してその箇所のみを更新させることができるので、いちいちサイト全体を更新して読み込む必要がなくなります。

サイトのなかで、画像や広告など、その箇所のみを切り離すことのできる点がJavaScriptを利用する利点としてあげられるでしょう。

習得の難易度でいえば、「HTML＋CSS」はプログラミングコードというには微妙な面もありますが、JavaScriptはよりプログラミングに近い形のコードになりますので、習得するには多少、時間がかかるかもしれません。

「HTML＋CSS」をある程度マスターしたのちに、JavaScriptに手を付けるようにするとよいでしょう。

ぼくはHTMLとCSSだけで、Javascriptを利用することはほとんどないのですが、たまに必要に迫られて書くことがあります。ただ、オフにしている人もいるので基本的にはほとんど使いません。

けれども、最近はスマートフォン用のサイトではコンテンツを圧縮する必要が出てきましたので、htmlとcssでの静的なサイトに加え、サイトを動的に展開させる必要性が出てきました。スマホの小さなスペースを有効に活用するため、メニュー部分のコンテンツを圧縮しつつ、必要に応じてページを読み込むことなく展開させるという方法です。

このページを読み込むことなしに、ページ内の１部分だけを変更させるにはJavascriptを使用するということまでは理解していましたが、具体的にこれを活用するとなると膨大な知識の量が必要だったため、今までは敬遠してきたわけです。

けれども「jQuery」というのがあるらしく、これを活用すれば、比較的簡単にJavascriptを利用できるようです。他サイトを見てみましても、たいていはこのjQueryを利用しているケースが多いと思います。

今までぼくは誤解していたのですが、jQueryなどのJavascriptは、そのサイト運営者がコードを一からすべて書いているものとばかり思っていました。こんな膨大な量のコードを書けるなんてすごいな、自分が書くとなれば、けっこうな時間がかかりそうだなとおもっていたのです。

けれどもこれ、実際はライブラリー化されているものを活用しているみたいなので、Javascriptを一からすべて書く必要はないみたいなのです。このライブラリー化されているネット上の共有財産みたいなのがjQueryですが、jQueryの「J」はJapanのジェイではなく「Javascript」のJだったみたいです。

とりあえず、スマホのグローバルナビゲーションの部分をjQueryで簡略化しようと思っているのですが、この方法についてただいま勉強しているところです。

最近、訪問者の方からウェブサイト修正のご相談があり、費用をとるべきか、有料で対応すべきかで悩んでおります。個人サイトの引越をしたいとのことで、ある程度のページ数があるサイトなのですが、サイトの構造を大幅に変更する必要があるので、正直、面倒くさくてやる気がしません。

非常に多いご相談は、無料ホームページスペースで作成していたものの、独自ドメインでサイトを運営したいというケースなのですが、その引越を行うにあたり、どのようにするのかで悩んでいる方が多いようなのです。

ただ、人様のサイトを修正するのでしたら、自分のアフィサイトを修正した方がぜんぜんよいですし、１万、２万の費用でやるのも気が向かないのです。

ただ、せっかく訪問された訪問者様は大切にしたいという気持ちもありますし、無償で対応しようか、費用をとるべきかで悩んでおります。

この点、サイト作成については、なんでそんなに費用がかかるのか？と疑問に思う方もいらっしゃるようなのですが、これは費用がかかって当然です。

１サイトを引越しするのに、２，３時間で済むわけはないですし、たいていは１日がかりとかになってしまうものです。ウェブデザインについても、オリジナルの案を出し、メール対応も何度か繰り返す必要がありますので、１万、２万でしたら正直、時給千円でバイトしていた方がまだマシです。

つまり、コストがかからず、原価ゼロで対応できる仕事なのに、何でそんなに費用がかかるのかという認識の人が多いのですが、人件費のみでも数千円程度で対応できるものではないのです。コストはかかりませんのでゼロ円でもできますが、自分の時間を使って対応するわけですし、サイトをうっかり消失してしまうリスクもある以上、時給２千円程度は最低限は頂く必要があるのです。

リダイレクトに失敗してアクセス数がゼロになったとか、あるはずのファイルを消失してしまったとか、検索順位が大幅に下落してしまったとか、そういったリスクを抱えた上での依頼になりますので、神経と気を使う必要があり、普通はお金をもらえるとしてもやりたくはないのです。

自分のサイトを修正して、アフィで稼いだ方がよっぽどいいです。

そのような次第で、無償でやる人もいるのかもしれませんが、ボランティアは止めた方がよいです。きっちりお金をとるとこはとらないと、自分が苦しくなってしまいますのでそれはよくありません。自分がやったことに対する報酬を頂くのは当然のことであり、無償での対応は自分のスキルに対する冒涜です。

できるだけ、ボランティアでやるのは避けた方がよいと思います。

SSLを当運営者が管理している他サイトに導入してみたのですが、もっと安いSSLブランドが出てきてもよい気がしております。携帯カバー率や企業の実在証明の部分で違いがあるのでしょうけれども、SSLに対応するだけで年額5万円とか、下手すると15万円以上の費用がかかるのは料金が高すぎます。

格安ブランドでは年額数千円程度のものもあるわけですので、それほどコストのかかる技術ではないと思います。https対応で暗号化されていればそれでよいわけですので、あえて10倍以上の費用をかけてまで有名ブランドのSSL証明書を取得する価値がよくわかりません。

あえていえば、サイトシールによる信頼性の向上ということなのかもしれませんが、シマンテックやグローバルサインなど有名ブランドのシールが貼ってあれば、何となく安心できるという側面は確かにあります。ショッピングサイトなどでサイトシールが貼ってあれば、購入障壁を下げてコンバージョンレートを引き上げる効果があるものと思われます。

ただ、個人サイトではラピッドSSLやCoreSSLなどの格安ブランドでも充分です。

携帯アクセスやスマホの対応状況が気になるようでしたら、有名ブランドのドメイン認証タイプを選択してもよいかと思いますが、一般的な個人サイトでは年額数千円程度のものでも必要十分のような気がしております。

現在、WindowsにPhotoshopをインストールして使っているのですが、グラフィックデザイン系の人たちはなぜかMacを使っているケースが多いように思います。この理由が現在でもよくわかりません。

たぶん、おしゃれとか、ビジュアル的な要素が大きいのだろうとは思いますが、もともとPhotoshopはMac用に作られていた経緯があるようなのでMacとは相性がいいらしいのです。

その他で考えられる理由としては、レティーナディスプレイなどMacの液晶モニターの方が画質がきれいなため、グラフィック関係の仕事をする際に繊細な色の違いを把握しやすいのだろうと考えておりました。

または、adobeソフトとMacの相性がよいため、ツールがさくさく動くのではないかという気もしておりましたが、ソフトの動作の速い遅いはパソコンのメモリとかビデオカードの性能とかに依存しますので、windowsだからとか、Macだからという理由で動作がはやくなるわけではないと思います。

現在、windowsで使ってはおりますが、ごくわずかではありますが、動作が重くなって微妙にぶれてしまう時があります。カクカクまではいかないのですが、超なめらかというわけでもないのです。

iPhoneとアンドロイド系のタッチパネルでは、スクロールする際の滑らかさに微妙な違いがありますが、もし、そのような微妙な違いがPhotoshopでも出てくるのなら、Macにインストールして使ってみたいと考えてます。

最近はパッケージ版ではなく、クラウドタイプになったようなので、MacでもWindows でも2台までインストールできるようになったみたいです。ノートパソコンでmacbookを持ってますので、今度、そちらの方にもインストールして使い心地を試してみたいです。