月別アーカイブ: 2014年2月

Googleの目指すもの

昨年、大学(ムサビ)のコンピューターリテラシーという科目で検索エンジンについてレポートを書きました。その時のレポートを公開します。(合格しました)WEBデザイナーなら知っておくと良いと思います。というか、しらないとまずい。先生が何度もマークアップの大切さを説明していますが、理解していないメンバーもいると思うので一度僕のレポートを読んでみるといいと思います。

Googleの目指すもの

代表的な検索エンジンであるGoogle は、どのような仕組みでユーザーの求めているページを瞬時に探し出し、ユーザーに返しているのであろうか。そして要求に対して返された結果は、公平なものなのだろうか。そして、それらのサービスからGoogle の目指すものとは何であるのだろうか。

Google の公式サイトに「検索の道のりは、検索キーワードが入力される前に、数兆に及ぶページをクロールしてインデックスに登録することから始まります。」(*1)とある。この記述からユーザーからの要求がある前にGoogle は既にウェブ上にあるたくさんのページを見て回り(クロール)、インデック(索引)を作り更新していることが理解できる。どのようにクロールしているのかと言うと、「Google では、「ウェブ クローラ」と呼ばれるソフトウェアを使用して、公開されているウェブページをクロール(情報を取得)します。最もよく知られているクローラは 「Googlebot」です。クローラは、ユーザーがウェブ上でコンテンツを閲覧する場合と同じように、ウェブページを見て、ページ上のリンクをたどります。」(*1)との記述から、人間が手作業で見て回るのではなくウェブクローラというソフトウェアを使用している事が分かる。クローラは最初にいくつかのウェブページの情報を取得し、次にそれらのページのリンクからリンク先の情報を取得し、そしてさらにそのページのリンク先を辿り情報を取得して行くという作業を繰り返すことで、大きなウェブのかたまりをインデックスするのである。例えば、チューリップという花について知りたい場合「チューリップ 花」と検索ボックスに入力して実行する。するGoogle のソフトウェアはインデックスを検索して、これらの検索クエリを含む全てのページを探しだす。この場合、チューリップと花に関する数えきれない程のページが該当するかもしない。では、Google はどうやって、ユーザーが本当に求めているページがどれなのかを判断しているのであろうか。「Google では、200 以上の「問い」を立てて、そこから判断をしています。例えばキーワードがそのページに何回含まれているか、そのキーワードはタイトルに現れているのか、それともURL か、またキーワード同士隣接して現れるのか、キーワードの類義語が含まれているのか、そのページを所有する品質は高いか、低いか、スパムでかどうか、などの問いを立てて、各ページを評価しています。」(*2)との記述からページ内でのキーワードや類義語の出現率など明確な基準を設け判断している事が理解できる。最終的に、Google はこれら全ての要因を組み合わせて各ページの総合得点を算出して検索結果をユーザーに返しているのである。しかしGoogle の判断基準とは別にお金を出せば検索結果の上位に表示されるのではないか、また広告との区別はどうなっているのだろうか等の疑問が生じる。その疑問に対してGoogleは以下のように述べている。「Google は、公平で役に立つ検索結果を届けることに真剣に取り組んでいます。お金をもらって、あるサイトをインデックスに追加する事や、より頻繁にそのサイトのインデックス上の情報を更新する事、またそのサイトの順位を上げることは決してありません。」(*2)と述べている。すなわちGoogle は、お金で検索順位が変わる様なことはなく極めて公平だという事を言っている。さらに広告に対しては、以下のように述べている。「検索結果の右側や上に広告が表示される事があります。Google は広告事業にも積極的に取り組んでいますが、広告主のためにより適した閲覧者に広告を配信し、ユーザーのためには見たい広告だけを表示するよう努力しています。広告を通常の検索結果と区別できるように表示する事にわたしたちはとても気をつけています。探している情報を見つけるのに役に立つ広告が見つからないときは、広告は一切表示しません。」(*2)との記述から分かる事は、広告と公平な検索結果を表示する場所によって区別し、さらに広告も検索キーワードに関連したページを記載しているようである。

このようにGoogle は、ユーザーがその時々に必要な情報を的確かつ迅速に提供することや公平性を保つことなどで信頼を得てきたのである。「Google は Google 検索を通じてみなさんが見つける情報について、いつも気を配っています。そのため、ユーザーを第一に考えた一貫性のある取り組みを目指しています。」(*3)とあるようにGoogle のポリシーは常にユーザーを第一に考えているのである。世界で代表される検索エンジンになったのは、そのポリシーが世界のユーザーに伝わったからであろう。

参考WEB サイト

府中でホームページ制作

自分のサイトができました。キャッチコピーやいろいろと手直ししたいですが、完璧にできるまでをまっていてもその時は来ない(上を見ている以上)なので、一応これで完成です。紙媒体と違い後から何度でも修正、変更できるのがweb siteのいい所。

manakadesign

http://manakaa.com/
http://blog.livedoor.jp/happygolucky1969/archives/52401162.html

2014-02-21 勉強会 デザインとしてのマークアップ

この日の勉強会は、マークアップについてぼんやりなメンバーがいるので基本からやりました。

少々話がそれますが、デザイナーとはなんでしょうか?……..デザインする人のことです。そんなの知ってますよね(笑)

では、デザインとはなんでしょうか?….かっこいいのや可愛いいのを作るのもデザインですが、それだけではありません。便利で使いやすい伝わりやすいを作るのもデザインです。ユニバーサルデザイン(できるだけ多くの人が利用可能であるようなデザインにすること)なんていうのもありますよね。

意外と前者だけがデザインと思ってしがいがちですが、後者あっての前者な訳です。簡単な例ですが、大人の高級感を出したいなら黒と白を基調にするのがいいでしょう(シャネルとか)。子供の元気さを出したいなら原色をたくさん使うといいですよね(トイザラスとか)。何を伝えたいかによってデザインは変わってきます。なので伝えたい事がないのであればデザインは存在しません。伝えたい事などはさておき、自分が可愛いやカッコいいと思ったものを表現するのもアリですが、それはデザインではなくアートです。(まあ、デザインとアートについて話すと長くなるのでここではそうしておきます。)

toysrus

chanel

使いやすい伝わりやすいを作るのがデザインという事なら、正しいマークアップでサイトを作るというのは絶対必要な事です。検索エンジンGoogleにサイトの内容を伝わりやすくすることでGoogleの評価は上がります。評価が上がるという事は検索が上位に来るという事です。検索が上位に来るという事は、ユーザーにこちらの伝えたい情報が伝わりやすくなるのです。

今度は見に来てくれたユーザーの気を引く為に見やすい使いやすいを考慮しながらカッコいいや可愛いを表現していくのです。

ウェブデザイナーとはそんな仕事だと思います。僕もまだまだ未熟ですが、以上の事を知っているのと知っていないのとでは、だいぶ差が出てくるのではないでしょうか。というわけで見た目のデザインだけではなく中身のデザインも頑張りましょう。文字色を赤にしようかピンクにしようか悩むように、ここのマークアップはpかな?それともh2?などと悩んでいきましょう。文字色に答えはありませんが、マークアップには答えがあるので頑張りましょう。

あと、この記事を読んでいて何か違和感を感じませんでしたか?文才がないので読みにくいというのは無しで!(笑)
写真のサイズもそうですが順番が問題です。シャネル、トイザラスの順番で説明がされているのに、写真の順番が逆です。(こういうのはもともと人間工学という分野で研究されてきました。)使いやすさや見やすさを考えるのであれば、説明と写真の順番は同じでなければなりません。

footerで見かける「copyright©hogehoge.com all rights reserved.」のマークアップ

pでやったりaddressでやったりしてましたが、pの方が正しいみたいです。でも、そこが連絡先なのであればaddressがベター。下記サイト参照↓

http://www.html5.jp/tag/elements/address.html

以上勉強会まとめです。(というか僕なりのデザインの考え方かな w)

パンくずリスト mark up

みなさん、パンくずリストは何でマークアップしますか?

html5ならこんな方法もあるということで、現在製作中のサイトはこれにしてみました。

参考にさせて頂いたサイト
coliss.com

2014-02-14 勉強会

この日は今年2回目の大雪の日でした。帰宅が困難になると予想して柴崎町学習館での勉強会は中止にしました。その代わり、コードシェアやFaceTime等を使い各自自宅にいながらの遠隔学習にチャレンジしました。

サイボウズや当サイトでもお伝えしていたように、先生は18:00〜22:00まで、みなさんの質問に答える為に自宅でスタンバイしてくれました。

僕は先生に、こんな事を教えてもらいました。
http://nobu-69.com/others.html
あとは、RWDについて少々。

やる気があれば、どんな状況でも工夫次第で勉強会は出来るものですね。

先生、お疲れさまでした。

2014.2.14の勉強会は大雪予報のため中止します

2014.2.14に柴崎学習感で開催予定の勉強会は大雪予報のため中止します。
以下、注意点です。

  • レギュラー参加者の皆さんは、これを読んだら、この投稿にコメントしてください。
  • 各自、安全な場所にて勉学に励んでください。タカハシはSNSやFaceTimeで質問は受け付けます。
  • いつものcodeshareも利用してね。
  • バレンタインのチョコレートは自分で食べてしまわずに、来週まで保管してね。

レスポンシブデザイン・画像の問題

レスポンシブデザインにする場合、パソコン用サイトの知識だけでは、いろいろな問題が出てきますよね。

まずは画像です。大きい画面で見るとちょうどいいのに、小さい画面で見ると、はみ出したりしてしまいます。
何事も、はみ出してしまうのは恥ずかしいですよね。

そんなとき便利なのが、画像を画面のサイズに合わせて変化させる「Fluid Image」という手法です。

くわしくは、各自ググって下さい。Fluid Imageでたくさん出てきます。

レスポンシブ デザイン

こんばんは。

自分のサイトを製作中です。パソコン用のサイト(横幅1000px)を作り、スマホやタブレットなどはそのまま縮小されたのが表示されればいいや〜と思っていました。完成を間近にして、実際スマホなどで確認したところ不具合がありました。細々と修正しているうちに「こりゃダメだ〜サイトをレスポンシブデザインにせねば!」とレスポンシブデザインに開眼。
パソコン用のサイトとして、いくらカッコいいと思うものを作っても表示領域の小さいものでうまく表示されないのでは、人は見てくれません。極論ですが見てくれないものは存在しないというのと同じです。大学で勉強した哲学で言う所のエッセ・エルト・ペルキピ(注1)です。

以前、仕事でwordpressでサイトを作りました。テーマ2012をカスタマイズしました。その時はもちろんレスポンシブデザインでした。半分以上はテーマが対応しているので、自分がメディアクエリを書いたのはちょっとでした。

今回は全部自分でやるので、頑張ります!

あと、サイト全体のフォントサイズも16pxにしました。以前までは小さい方がおっしゃれ〜と思っていたのですが、大きく見やすい方が人に優しいかな。

「見やすい」「使いやすい」「伝える」などを形にするのがデザイン。
人がどう見ようと感じようと関係なく自分のイメージした物を形にするのがアート。(完全にそうとは言い切れないけど、とりあえずここでは対比の為に分かりやすくそうしておきます。)

仕事としてやっていくならウェブのデザイナーでなければいけません。
ウェブのアーティストというのもなんだかカッコよさそうですが、依頼がこなそうです。w (来たらうらやましい)

僕はデザインとアートの境界線を分かっているつもりでいるけど、時々その境界線が曖昧になってしまいます。一人前のデザイナーになるには、この境界線をきっちりと知る事だと思い自分の為に記しておきます。

1からやり直し中のサイト
マナカデザイン
先生、
・ページの右上のロゴfluid imageやってみました。
・なるべく横幅は数値指定しないほうがいいですよね?(する時は%がよいですよね。)
・フォントサイズも、もちろんemがよいですよね。
・以前りんごでやったドロワーメニューにも挑戦しようと思います。wordpressの2012(りんご)のように、たたんで1つにしてタップで全部が下に表示という風にしたい。この議事録をもとにできますか?僕の議事録cssとjQueryの2種類がありますが、現在実用的にはどちらがよいですか?あとドロワーは1000px以下で出現しようと思いますがどうおもいますか?

その他レスポンシブについてのアドバイスあれば、お願い致します。

注1
エッセ・エルト・ペルキピとは、18世紀の哲学者ジョージ・バークリーの有名な言葉で「存在しているという事は、知覚されていること」という意味のラテン語である。事物は知覚された時に初めて存在し始める。そして、その事物についての意識外では、事物は全くの無であるというのだ。その知覚は私の精神だけでなく人間性を築き上げている精神の共同体によって知覚されているという事なのである。例えば現実とは、私達みんながそこに参加し、様々な仕方や観点で関わりあっているものといえる。(僕の大学レポートを抜粋)

2014-02-07 勉強会

この日は8人の参加者で賑わいました。

これから初心者の方の参加が目立ってきそうな感じですかね?!そうなるとレベルがバラバラになるので、全員で1つの事をやるのは無理が出てくるかも知れません。
wordpress関数をやっても初心者には理解不能だろうし、idとclassの違いについてやっても初心者以上には退屈でしょう。

来た全員が納得できる勉強会にするにはどうするのが良いか、各自考えてみて下さい。

いくつか考えました。

  1. ある程度出来る人は初心者の方に教えるという立場になる。(ずっとじゃなくても)
  2. 仕事やポートフォリオ等の制作をしていて、困った事があり先生に聞くのはOKです。その為に来ている人もいるので。しかし何十分も先生を独占してしまうと、他の人に迷惑がかかります。かといって質問が出来ないのであれば来る意味がありません。なので、個人的に質問して先生を独占してしまうのはOKとして、そのかわり、その教わった事を必ずこのサイトに3日以内に議事録を書くとういのはどうでしょう。1人の人が何かの解決法を先生に聞いたとしても議事録に書いてくれれば、情報が1人だけのものではなく全員のものになるから。(というか、本来ならこんな事を決めなくてもやるべきだと思いますが….)
  3. とりあえず行けばいいという考え方を止める。今日はこれを先生に質問しよう。初心者の人にこれを説明して上げよう。最近の◯◯は、どうしているのか全員に聞いてみよう。などなど。ぼんやりとして勉強会にいって先生が何かをやってくれて、言われるままにやったら出来ましたー!というのはなくなるかもしれませんね。(そもそも、りんごは学校じゃなく勉強会なんですから!)

先生、みなさん

どうですか。

特定の位置までスクロールしたときにアニメーションさせる(jQueryとcss)

2014-01-31と2014-02-07の2週にわたり勉強会でやった「特定の位置までスクロールしたときにアニメーションさせる」というのを自分なりにやってみました。
オブジェクトの数だけif文を書くという面倒なやり方ですが、理解しました。オブジェクトの数だけif文を書かなくて済む方法も先生に教わりましたが、まだちょっと難しいので理解していません。

とりあえず自分のサイトにアップしました。
http://nobu-69.com/others.html

授業に参加したみなさんは、どれくらい理解しましたか?
僕は理解するのに結構いじくりまわしました。時間も費やしました。授業で先生の説明を聞いただけで技術はモノになりません。聞いた事を基に家でいろいろやらないとダメです。

なので、細かい説明はしません。自分でやってみてつまずいた箇所があったら教えて下さい。分かる範囲でお答えします。

css

jQuery

html

mac 解凍ソフト

マック初心者です。
.sitという圧縮ファイルが解凍できません。なにか解凍ソフトをインストールする必要があるようですが、いくつかやってみたがインストールできません。

このフリーソフトいいよ、というのがあれば教えて下さい。

FireFox Javascript有効

なにかいじっていたら、いつのまにかFireFoxのJavascriptが無効になったらしい。有効にする為に検索したら、ツールのオプションをクリックとあるが、ツールにオプションがない。あと、Firefoxから環境設定でコンテンツにjsについてのチェックボックスがあると書いてあるが、チェックボックス自体がない。

imac osx 10.9.1
Firefox 26.0

です。

jQueryのエラーチェック

2014-01-31 勉強会の議事録です。

この日もいろいいろな事を学びました。その中の1つをまとめました。

jQueryのスムーススクロールってありますよね。ページ内リンクで、しゅるしゅる〜って移動するやつ。私がずっと前から使っていたものは、jQuery本体とトリガーのみで実装する簡単にできるやつでした。それを設置しているページに別の新しいjQueryを入れました。そしたら、それが動きません!jQuery本体のバージョンが古いのかなあ?と思い最新版にしました。jQuery本体1.5.1を1.10.2にバージョンアップしました。それで、新しいjQueryは動きましたが、今度はなんと!スムーススクロールが動きません。

そういう場合は、FireBugのコンソールでチェックです。先生にチェックの仕方を教わりましたが、こちらのサイトにもありますので、見て下さい。Firebugでできること: ソースコードのエラー解析

これで、エラーが出ていたらその箇所を修正すれば良いのです。

コンソールチェックで下から4行目の $.browser がエラーですよ!と出ていたので。それを直します。
先生のアドバイスで、下から4行目を下記のように書きかえました。

これで直りました!やったー。

jQuery-1.9から「jQuery.browser」が完全にサポートされなくなっていたようです。jQuery $.browseで検索すると出て来ます。

jQueryがうまくいかないという事はよくあります。原因はさまざまですが、今回紹介したようにまずはエラーチェックをするのが良いでしょう。