2分でサイトがカッコよく!さくらのレンタルサーバの全サイトでモリサワのWebフォントが無料使用可能に

タイプスクエア(typesquare.com)

タイプスクエア(typesquare.com)

Webフォントを使うと、平凡なメイリオやMSゴシック以外にも読みやすく、また印象に残るテキストでウェブサイトが作れます。

今まではキャッチコピーの書体などにこだわった場合、画像で表現してというのが一般的でしたが、もっと綺麗に読みやすく劣化に強く表現できるようになる、ということです。

さてさくらインターネットのレンタルサーバにて「モリサワ」のWebフォントが無料で使用できるようになりました。
今まではWordPress内での対応ということでしたが、今回同CMS以外、HTMLページであれば自由に使えるようになったのは大きいことです。

モリサワのWebフォントを無料で使える「さくらのレンサバ×TypeSquare」をすべてのサイトで利用できるよう機能拡張

一応以下のような前提条件はあります(2016年9月16日現在):

  • プランはスタンダード以上(ライトは不可)
  • 利用にはコントロールパネルからドメインの登録が必要
  • 30書体を月間2.5万ページビューまで表示
  • HTMLに直接タグを記述してWebフォントを表示する

そして使用できるフォントは以下のようなバリエーションです(2016年9月16日現在):

明朝体 リュウミン R-KL / リュウミン M-KL / 見出しミンMA31 / A1明朝
ゴシック体 新ゴ R / 新ゴ M / ゴシックMB101 B / 見出しゴMB31 / ナウ-GM
丸ゴシック体 じゅん 201 / じゅん 501 / 新丸ゴ
デザイン書体 フォーク R / フォーク M / 丸フォーク R / 丸フォーク M / カクミン R / 解ミン 宙 B / シネマレター / トーキング / はるひ学園 / すずむし / G2サンセリフ-B
装飾書体 新丸ゴ 太ライン
筆書体 正楷書CB1 / 隷書101
UD書体 UD新ゴ R / UD新ゴ M / UD新ゴ コンデンス90 L / UD新ゴ コンデンス90 M

導入方法も非常に簡単で、以下の通りです:

  • さくらコントロールパネルからログインし、「ウェブフォント」項目から表示したいドメインに設定する
  • 下記のタグを</head>直前あたりに挿入する
<script type="text/javascript"src="//webfonts.sakura.ne.jp/js/sakura.js"></script>

もともとフォント、書体というのは活版印刷の時代より前から芸術の域にまで高められた世界であり、とても奥が深いもの。

Webフォントはまずは表示速度を追いつかせるところから始まったとはいえ、まだまだ日本語は種類も限られていて、そして画面上での表現も紙とは異なる制限があるため、まだまだこれからです。

とはいえ世間の端末のディスプレイ精度も上がっていてより再現性の高くなっていますし、googleからやはり無料で出ているnoto fontのおかげもあり、この1,2年でだいぶ普及してきたと思います。

モリサワから使えるフォントも、これだけあればある程度はなんとかなるかもしれません。このサイトでも使用している新ゴ、内容によっては読みにくいですしね..

よくを言えばウェイト、線幅はもっと多彩なはずなので、より読みやすい、使いやすい選択肢が増えれば嬉しいです。

フリー素材サイトから目的の画像探しを5分短縮する方法

デザイナーであれば、素材探しの旅に出かけることがありませんか?

「無料デザイン素材サイトまとめ」「厳選フリー素材集」などの記事タイトルを見かけたらブックマークしているかもしれないですね。

それでもそんなお役立ちサイト群の中からぴったりの画像を見つけようとすると、思ったより時間がかかってしまうことありませんか?

ここではそういったサイトで、自分の探している素材を素早く見つける方法の一つをご紹介。

前置きはいいから、早くやり方を!という方はこちらのアンカーリンクからどうぞ。

素材探しって、時間がかかりませんか?

多くのデザイン素材サイトは、カテゴリ別、用途別、サイズ別などで写真やイラストが分けられているのでそこから深掘りしていくことが多いかもしれず、またサイトのUIもそれを前提としているかもしれません。

そしてキーワードによる検索窓が付いていますが、大抵ここは素材探しのツールとしては二次的な扱いの位置です。

もう一つ、時間がかかる理由は検索結果の表示速度、そしてページネーション(ページ送り)で分けられてること。

みんな大好き(というより本当にお世話に成っている)ぱくたそさんも、ローディング時間がちょっとかかるため、SSDとLTEと光回線になれたこの体としては「もっと速く!」と感じてしまうんです。

本来なら、デザイナーが時間を使うべきはここじゃないのに!とストレスを感じるタスクの一つ。

googleで一工夫して探してみよう

そんな時には、やっぱりgoogleさまに頼ってみましょう。

検索窓にて「site:素材サイトのURL キーワード」と入力し検索します。すると、カリッカリの速さで、ページ送りもなく一覧表示されます。

例えばぱくたそさん(pakutaso.com)で、「空」に関する写真を探してみましょう。
その場合以下のようにgoogleで検索します。

site:pakutaso.com 空

そうすると、pakutaso.comの中から、「空」に関連するキーワードの画像を探し出してくれます!

site:pakutaso.com 空

注目すべき点の一つは、実際にぱくたそさんの検索窓から「空」を探した時と検索結果が異なる点です。以下がぱくたそさんにて探した場合です。

空|ぱくたそ

ぱくたそさんの検索結果抽出のロジックはわかりませんが、おそらくキーワードを中心になっているのではないかと思われます。

対してgoogle画像検索の場合、そういったサイト内でのキーワード紐付けとは別に、googleの持つ「空」というデータと比較し関連度に応じ探し出して並べているとわかります。

画像を見つけた後は、当画像をクリックし、実際のサイトのページからダウンロードしたり、異なるサイズを選んだり、他の関連画像を見たりできます。

複合キーワードも使えます

そして当然、複合キーワードでも検索できます。スペースで区切っていくことで、より適した画像を探すことも可能です。

複合キーワードとなる程、googleの強みが出てきます。

もちろん、有料素材サイトでも。

この検索は、もちろん有料素材サイトでも可能です。例としてPIXTAさんで同じ空の画像を検索してみると、以下のようになります:

site:pixta.jp 空

空|PIXTA

幾つかのリマインド事項

上記PIXTAさんの場合、該当画像をクリックすると、写真自体の持つ画像ページではなくPIXTAの画像検索ページに飛ぶことがあります。

これはPIXTAさんのページ表示・画像紹介方法が検索ページから画像表示・購入などの機能をもたせているからかもしれません。

とはいえ、画像番号などを使ってサイト内検索をすればすぐに行き着くことができます。

また、サイト全体から画像を探すので、「素材」以外のコンテンツ、例えばサイト内のバナーとかも探してくることもありますが、この辺りは自分でフィルタリングしましょう。


ここまで無料・有料画像サイトが増えてきたのも、コンテンツマーケティングが充実してきていることも一因で、もっと需要は増えてくるでしょう。

それに沿ってきっとフリー素材サイト、有料画像サイトももっと検索技術が上がってくることと思いますので、楽しみです。

もっと速い!もっと的確!な画像探し方法があれば、ぜひみなさん教えてください。

急にサイトの表示トラブルが起きた場合は、使用している外部サービスも見直してみよう【AddClips編】

とあるウェブサイトにて、ページの上部の看板から下のコンテンツが表示されない!という相談がありました。

実際に訪れてみると、確かにヘッダのメニューあたりまでしか表示されていません。

しかし、2分ほど待つとゆっくり残りのコンテンツが表示されてきました。牧歌的なISDNの頃のホームページならわからなくはないですが、今時こんなに重たく感じることはありません。

まずはどこにエラーが起きているか、調べてみよう

ブラウザでHTMLソースを見られる、インスペクタを開きます。
Safariであれば「開発 > Webインスペクタ」、Chromeであれば「開発管理 > ソースを表示」、他のブラウザも実装しているインスペクタを見ると裏側の状況が見えます。

今回はSafariを使いましたが、ここで「リソース」を見ていると、読み込めていないファイルが原因になっていないかわかりますし、「ネットワーク」や「タイムライン」を見ると、どのファイルや機能が遅延を起こしているかが分かったりします。

「デバッガ」のセクションにて「Failed to load resource: データベースの要求が時間切れになりました。」というエラー文が。
そして対象となっているファイルは「AddClip.js」の文字が。

Failed to load resource: データベースの要求が時間切れになりました

ウェブサービス「AddClips」は2016年3月末に終了していた

AddClips、比較的最近の記憶に引っかかったのは、facebookのタイムラインで見かけた、ランサーズ秋好社長が自社サービス「AddClipsを終了する」というメッセージでした。

結構有名なサービスのため一時的にはニュースが駆け巡ったかとは思いますがまだ知らない人も多いかもしれません。
実際にサイトにアクセスすると、2016年3月31日でサービス終了したとの告知が。

そして実際のソースにも、AddClipsのサーバにjavascriptを読みに行っている箇所がありました。

addclips

これがいわゆる、「データベースの要求切れ」、何度もサーバに要求して、その間他のデータを表示させなかった原因であったようです。
この箇所を削除すると、問題なく表示されるようになりました。

3月を過ぎてもしばらくは使えていたので、もしかしたらサーバ内の該当スクリプトはその後もしばらくは置いていたのかもしれません。

表示に問題がある場合、原因の一つとして外部から読み込んでいるスクリプト、ブログパーツ、プラグインなどを疑ってみることも必要ですね。

無料のサービスほど、変化が早いネット業界

AddClipsは2007年のベータ版から公開され使われていたとのことで、およそ10年に渡ってソーシャルメディアの発展に活用されていました。無料、そして貼り付けるだけで使えるという容易さゆえにいろんなサイトで見かけていましたが、この度役目を十分果たして勇退、というところでしょう。

しかし今回のように、同じサーバ内に置いてそこを参照ではなく、外部ファイルを参照する方法が使われている場合、トラブルになるかもしれません。
ネットのサービスには無料で使えるサービスは多いため、今回のようにいきなり使えなくなるゾンビのようなサイトやサービスもどんどん出てくる気がします。
もちろんサーバ環境はWordPressなどのCMSやプラグインなどの仕様、対応状況が原因となることもあるでしょう。

無料サービスほど自己責任なので、ちゃんとしたメンテナンスの大切さを感じるところです。

【2015総括】2016年のウェブ制作のトレンドが分かる、9つのトピック

早いもので2015年も終わりとなりますが、ウェブ制作業界の話題となったニュースを振り返るイベント、CPI x CSS Nite「After Dark」(29)に参加してきました。

フリーランスともなると会社や同僚などのつながりが少ないため、節目を持って振り返ること機会を持つのはいいことですね。

場所はKDDIウェブコミュニケーションズ セミナールーム。

KDDIセミナールーム。

初めて行きましたがとてもカジュアルで明るいセミナールームでした。

プログラムは、Facebookのコミュニティ「webクリエイターのための情報交換所」に発信された技術トレンドを振り返りつつコメントを重ね、来年の潮流を読み取る、というスタイル。90分の割になかなか濃い内容でした。

その中でも、私の関係する分野で興味深かった点を幾つか取り上げます。

IEを対象とした案件が今後は少なくなると言える流れ

Internet Explorer関連の記事紹介がいくつも見られました。
やはり、より規模の大きなサイト運営や制作をする方々にとってはずっと注目の的というか喉の奥に引っかかった小骨のような存在であったということでしょう。

酒と泪と Edge と IE

Internet Explorerサポートポリシー変更の重要なお知らせ – Microsoft
http://www.microsoft.com/ja-jp/windows/lifecycle/iesupport/

【注意喚起】 Internet Explorer のサポートポリシーが変更、バージョンアップが急務に:IPA 独立行政法人 情報処理推進機構
https://www.ipa.go.jp/security/ciadr/vul/20151215-IEsupport.html

 

Internet Explorer サポートポリシー変更の重要なお知らせ

Microsoftの公式サポートからIE8がはずれ、IE9もVISTAのみサポートということになりました。故に、IE10以上を対象とした案件が多く増えてくると思われます。
来年度も私もクライアントさんとの環境対応においては、どしどしこう言った新しい流れに合わせていきたいと思います。

読みやすい、分かりやすいデザイン品質について

アメリカ政府によるWeb設計基準が公開されていました。

U.S. Web Design Standards | U.S. Web Design Standards
https://playbook.cio.gov/designstandards/

予算をかけて、デザインや読み易さの設計基準を作る、なんてことを日本の政府はまずやろうとしないかもしれないんですが、スタンダードを作ることの大切さは変わりません。ちょっとこちら、日本語の場合はルールが異なる部分も多いとはいえ、参考にしたいと思います。


 

なぜボケた画像の上の文字は読みやすいの? | DESIGN LAB by tuqulore
http://design-lab.tuqulore.com/textonblurimage/

こちらは最近よく見られる趣向の一つ、ぼかした画像。なぜ使われるのか、非常に論理的に説明されているので是非オススメです。


 

そして、検索品質について、大御所からのガイドラインです。

Googleが検索結果の品質を評価するガイドラインの完全版を公開。 | SEO Japan
http://www.seojapan.com/blog/google-search-quality-raters-handbook-updated-with-mobile-guidelines-local-queries-know-queries

こちらは160ページ超の英文で、僕もまだ読み込む時間を確保できていないのですが、SEO気になる人は検索動向を見て発信する専門家のブログや参考書よりも、先に大元であるこちらを読むほうが有益ですのでオススメです。

cssnite

ウェブサイトのSSL化、HTTPSが今後は基本となる

これは以前から言われていることではありますが、ウェブサイトのSSL化が加速しそうな進展です。

EFF、Webサイトを無料でHTTPS化するプロジェクト「Let’s Encrypt」のパブリックβ公開 – ITmedia ニュース
http://www.itmedia.co.jp/news/articles/1512/04/news106.html

私も新規制作の際はほとんどSSL導入を前提に行っていますが、無料、という流れは増えるのではと思います。特にECサイトでは必須になっていきそうですね。
もちろん認証段階にもよりますが、ドメイン管理会社や、サーバ運営会社の方での囲い込みの一つにもなってもおかしくないかもしれません。

支払い手段の多様化が、もっと容易に。

支払い方法の導入が、もっと簡単にできる流れも加速しそうです。Javascriptを1行埋め込むだけでコンビニ決済できるという方法が、紹介されていました。

オンライン決済「SPIKE (スパイク) 」に コンビニ決済と銀行決済のPay-easy(ペイジー)を追加
http://www.metaps.com/press/ja/270-spike-pay

業界最安値水準、2.95%の決済手数料で24時間365日現金支払いが可能とのこと。多様化するユーザーの行動に合わせた、支払い方法の提供はセオリーですが、本当に多様化してます。

オンライン決済をサイトに組み込むときに代行会社と提携しますが、今は20種類以上の支払いパターンがあるんですよね。

導入費用や方法がより簡易になっていくと、もっとその業種のユーザーに合わせたサービス提供ができるので歓迎です。

ユーザーを知りたい時に役立つ、スマホ利用率のビッグデータ

毎度興味深いデータを提供してくれるyahoo!マーケティングより:

都道府県別スマートフォン利用状況データベース – Yahoo!マーケティングソリューション
http://yahoojp-marketing.tumblr.com/spdb

yahooマーケティング

 

各県、各世代別のショッピングやアプリの利用率、OSの利用率などがグラフで見えて大変興味深いです。提案や企画書にも生きてくるのでは。

実際、ターゲットの予想などを立てる時、意外と予想と異なることなども大いにあるので、役立つと思います。


 

2016年も大きなうねりはあることとはお思いますが、より便利に、簡易に、分かりやすくというのは必然的に改善されていくとは思いますが、多様化する分キャッチアップが大変ですね。

様々なサービルのおかげでWeb制作が身近になる分、設計や情報伝達のノウハウの必用性もいずれ気付くところなので、その時に備えたスキルアップやお客さんへのPRが必用だと思います。

それでもランサーズに期待したい理由

Lancers

ランサーズという仕事受発注サイトがあります。そこでの問題点がブログ界隈で燃えていました。

ランサーズやってみたけど地雷クライアント案内所にしか見えない(kosuke.cc)
予算はあらかた低い。ウェブページは安いところに頼めば5万円で出来る!と言い張る。アプリは10万円でLINEのようなものが作れると思っている。30万円出せばmixiやはてなくらいのサービスが出来上がり、100万円出せばfacebookが完成すると信じてやまない。そんな方が地雷の方には多い。

私にとってランサーズが役に立たないたった一つの理由(Handmade Future!)
ランサーズをはじめとする既存のクラウドソーシングサイトがまったく役に立たないのは、クライアントに対して自分を売り込まなければいけない仕組みになっているためです。

わたしもランサーズはじめクラウドソーシングを受発注両方で活用はじめて1年ちょっとというところです。言いたいことすごくよく分かります(笑)

ランサーズは2013年後半頃から広告やメディアでも見られるようになり、案件数もどっと増えたと同時に泡沫受注者も増え全体的な質感が変わってきた感はあります。

リテラシーが低いのは、受注者だけでなく発注者も

今回のテーマに見積の相場と品質というのがありますが、ランサーズというか、クラウドソーシングは全体的に同じ問題を抱えているように思えます。

個人の依頼者もそうですが、スタートアップ企業とか、独立した人とか、デザインやメディア関係のつながりを多く持っていない人はこういった販促関係のコスト感が安めの人が多い気がします。

また技術者として生きてきていて、細かな価格交渉はニガテというタイプも少なくありません。

結果として、技術職に関する正当な評価が、依頼する方も仕事する方も定まってないままになってるのかもしれません。

仕事への評価を語り始めたら、ブラック企業とか介護職とかどうなのよと話は広がってしまいますが。

クラウドソーシングの外ではどうなのか

クラウドソーシングから離れて仕事を依頼される(依頼する)としても、その相場観が分からないという人も実際少なくないのではないでしょうか。ロゴをデザインしよう、と思って調べて出てくる相場のピンキリ感。

広告宣伝で見かける価格はどれも格安や価格破壊をうたったものばかり。そしてできるならできる限り節約してすませたい、と。

地方の零細企業やお店はCMや雑誌、新聞などの宣伝経験がない所も多く、それほど予算もないため全体的な相場は高くありません。
わたしもそういった環境に合わせた仕事をしていたため、”正当な”相場を聞くと違う世界のように感じていました。

そういった仕事に実際に携わってみると、きっちりと”ちゃんと”やろうとすると、大手がその価格でやっているにはワケがあることがよく分かります。

価格交渉の問題はクラウドソーシングだから起きてるんでない、普通の市井の人たちもそこまで意識は持っていないこともあるのではと思います。

ネットの功罪の一つで、ウェブに集約されるとより顕著に問題点が浮き彫りになってくるわけです。

“もう終わった”サービスというよりも、これから成長しないといけない市場なのかも

クラウドワークス

こういった仕事紹介サイトは以前からありましたが、盛り上がりを見せてきたのはここ3,4年というところではないでしょうか。

その中でもランサーズとクラウドワークスは2大勢力。

それ以外の会社は、数をまず集めるのに四苦八苦していて、上記2社のような運用してのトラブル解決は2の次となっている気がする。安さを売りにしているところほど”地雷”クライアントがそこかしこに埋まっている気配があります。

なんでもクラウド化しはじめて、逆にローカライズも進んでいって、というのが現在のネット業界の趨勢なので、クラウドソーシングもそのまっただ中で揉めてる感じです。

つまり、今は過渡期に起きる問題なのではないかと思う

仕事の受発注のマクロ化とグローバル化を考えると縮小はしない市場だと思います。なのでもう少し七転八倒があってカタチが整う気がします。

だから業界や市場を育てていくくらいの感覚で、はやりのグロースハックってやつでしょうか、サービスプロバイダやリーダー、ユーザーが成長させ作っていくというくらいの感覚で見ています。

ヤフオク!やYouTUBE、最近話題のwebサービス群だってそんな感じです。

試行錯誤して色々試して、これはクライアントからしたらアウト、これは制作者的にダメとかやっていきながら、ダメな受注者は淘汰されていきながら、いい感じに成熟していく余裕がまだあるのではないでしょうか。

ま、もう痛い目はこりごりだとか、オレはこの品質では使わないよという人はひとつの勢力です。
ユーザーにダメだしされながら改善していって元締めとしては市場を成熟させて頂きたいところです。

育っていったら、そのときはそのときの問題がある気はしますがw

現状それぞれよくしようと取り組みをしている

今回、冒頭のブログがbuzzりはじめてすぐにランサーズ社長の秋好さんはブログで反応していました。具体的な策は出ていないけどなんとかしようという気概は好感を持てます。

実際この1,2年観察していると、楽天のような”鵜飼い”のようなシステムではなくて、なんとか受発注の場を正常化しようとバックボーンとして試行錯誤しているのは分かります。

47都道府県おじゃまします!フリーランス交流会だとか、福利厚生サポートだとか、評価システムだとか、チャット機能だとか、大手企業との連携だとか。それがうまくいっているかの判断は置いておいて、問題点をある程度元締めの方も認識していて、なんとかしようとしているんだととらえています。

Lancersエキスパート。うわさはあまり聞きませんが現状どうなんでしょう

Lancersエキスパート。うわさはあまり聞きませんが現状どうなんでしょう

 

一利用者からの要望

とりあえず品質管理ですね。プロジェクトであれば途中、そして例えば納品時のサポートをしたり。

それがしっかりできてくるなら、自ずと結果や評価が伴ってくるかと思います。そういった優良ユーザーを相手にした対応とをしていたらいい仕事も人材も集まってきます。

今取り組み始めているようなスキル認定とかエキスパート制度をもっと進めて、この程度のスキルや評価となった人しか、このレベルのプロジェクトには参加できないとか、それくらい排他的に進められる依頼の仕方もないといけないのかもしれません。

そして受注者側の意識の底上げ。

ネットだからこそ問題点が集約され顕在化されやすいなら、逆にネットだからこそ受注者の意識もそこあげできるんではないかと。その喚起の仕方はすぐには思い浮かびませんが。すでに今でもだいたいこれくらいの相場ですとの表示はしているようですしね。

***

クラウドソーシングは、働き方の、スキルの、そして地域の格差社会への挑戦と見えます。

同じ仕事やクライアントだけではスキルも上達しません。

また地方にいくほど制作料金は低いため、スキルや経験も上がらないしクライアントの意識も業務もなかなか向上しません。

ぜひ価格破壊ではなくて、既存のワークスタイルの固定観念を変えたり、現存するこういった格差にも影響のあることだと思うので、市場として成長してほしいと望むところです。