Wordpressのwp_oembed_getを使っていて、Youtubeの関連動画を非表示にさせたい場合。

カテゴリ:

wordpress

ウェブ制作

使われるケースは本当にまれだと思うのですが、覚書として

[php]
/**
* Yotubeの動画を追加するwp_oembed_getを拡張
*/
function namespace_oembed_youtube_custom( $html, $url, $args ) {

// Yotube動画を判定
if ( !strstr($url, 'youtube.com') )
return $html;

// URLを取得しクエリ文字列を分解
$url_string = parse_url($url, PHP_URL_QUERY);
parse_str($url_string, $id);

// デフォルトの配列をセット
$defaults = array(
'width' = 480,
'height' = 385,
'showinfo' = true,
'rel' = true
);

// デフォルト値とマージした連想配列を取得
$args = wp_parse_args( $args, $defaults );

// 配列を変数に変換
extract( $args, EXTR_SKIP );

// 独自のパラーメーター出力時に追加
if ( isset($id['v']) ) {
return '<iframe width="' . intval($width) . '" height="' . intval($height) . '" src="http://www.youtube.com/embed/' . $id['v'] . '?rel=' . intval($rel) . '&showinfo=' . intval($showinfo) . '" frameborder="0" allowfullscreen></iframe>';
}

return $html;
}
add_filter('oembed_result', 'namespace_oembed_youtube_custom', 10, 3);
[/php]

で、これの使い方は

[php]
echo wp_oembed_get( 'http://www.youtube.com/watch?v=mx4xeO3Xq7g', array( 'width' = 203, 'height' = 164, 'showinfo' = false, 'rel' = false ) );
[/php]

みたいな感じです。

[php]
'rel' = false
[/php]
ってすれば動画を再生後に関連動画が非表示になります。

ちなみに
[php]
'showinfo' = false
[/php]
の部分で動画のタイトル部分も非表示にできます。

まぁこれは更新機能などでただYotubeの動画のURLを貼ってもらって、
サイトにiFrameで表示する場合に使えると思います。

[php]
'width' => 203, 'height' => 164
[/php]
iFrameの高さと横幅は最初から自由に変えれます。

以上、覚書でした。

SassやらSCSSやらCompassやらを最近使っているんだ！！

カテゴリ:

ウェブ制作

私最近、スタイルシートを書くときはもっぱら「Sass」を使っております。

私も最初「Sass」ってなんやねん？って思っておりました。

そしたら、よく調べてみるとスタイルシートを効率よく書くことのできる開発環境みたいなものだったんですね。

そしてその「Sass」で作るスタイルシートを「SCSS」というようです。

私自身、もともとスタイルシートってめんどくせぇなぁって思っている人だったので、
この「SCSS」の登場は願ってもないものでした。

自分もSCSS導入にあたって、色々なサイトを調べて試しながら現在の開発環境を手に入れたので、
そこらへんをちょっと紹介したいと思います。

参考にしたサイト
http://hayashikejinan.com/webwork/239/

使うソフトは以下の二つを使っています。

• Netbeans7.4



• Koala

まず、使っているエディターは「Netbeans7.4」です。
「7.4」からSCSSが正式にサポートされたようで、プラグインなどを
入れなくてもSCSSのコーディングに対応してくれているようです。
「7.3」以下だとプラグインのインストールが必要です。
[caption width="320" align="alignnone"] 私の好きなNetbeans。正直Dreamweaverより使いやすい・・・[/caption]

そして「Koala」というのはSCSSファイルを通常のCSSファイルにコンパイルしてくれる
ソフトです。SCSSはそのままだとHTMLに認識されませんので、CSSに変換する必要が
あります。SCSSで効率よく書いて、CSSに変換するといった流れですね。

[caption width="600" align="alignnone"] これがKoalaです。[/caption]

こちらのKoalaさんに作業しているフォルダを登録してあげるだけで、
SCSSを保存するたびに自動でCSSに変換してくれます。

最初はこのKoalaさんを使わずに、Netbeansでコンパイルするように試してみたのですが、
設定がうまくいきませんでした。そんな中このKoalaさんがあると知ったので、
なんかかわいいし、これ使うかってな感じでこちらを使うことにしました。
[caption width="300" align="alignnone"] これがKoalaのアイコンです。[/caption]

んで、このSCSSですが、使えるようになるには参考サイトにも書かれているのですが、
Rubyをインストールしたり、コマンドプロンプトを使ったり、
デザイナーにとってはちょっと面倒かもしれません。

ただ、個人的には導入してからすごくCSSを書くのが楽になりました。
普段プログラミングをしている感覚と近いかんじでCSSをあつかえるようになったかなと思います。

自分的にちょっとデメリットになるのかなと思っているのは
なんでもかんでも入れ子構造で書いちゃって、結局省略できるはずのセレクタまで記述しちゃって
サイトのパフォーマンスを下げてしまう可能性があるのかなぁとは思いました。

[css]
#main {
width: 600px;
p {
margin-bottom: 1.5em;
}
}
[/css]
SCSSだとこんな感じで入れ子にスタイルを書くことができます。
ただ、そんなにアクセス集めないサイトであれば気にする必要もないとは思いますが。

まぁとにかくCSSを書くのが楽になったってのは自分にとってはものすごく大きいことなので、
今後もバリバリ使っていくとは思います。
その使っていた経緯など、こんな便利なことができるんだ〜ってことは
これから記事に書いていきたいのでよろしくお願いします。

グリッドレイアウトのサイトを制作させていただきました。

カテゴリ:

html5

ウェブ制作

去年の11月〜年末にかけて、
私が制作に携わらせていただいたサイトを紹介したいと思います。
こちらのサイトです。

http://www.globridge.co.jp/

デザイン・コーディングを担当させていただきました。

このサイトで注目していただきたいのはトップページを「グリッドレイアウト」という手法で作っているところです。（トップページだけです）
こんなかんじで、

ブラウザの横幅に合わせて、要素が自動で最適な列で整列するという見せ方です。
そして、この手法を使うためにjQueryの「vgrid」というプラグインを使用させていただきました。

はじめて、このような「グリッドレイアウト」のサイトを作らせていただいたのですが、
これはなんともサイトの見栄えがよくなるすばらしい手法だなと思いました。
最近流行っている？（けっこう見る気がする）のもすごいうなずけます。

[caption width="400" align="alignnone"] こんなのとかね。[/caption]

あとこのサイトはすべて「HTML5」で書かれています。
今後標準仕様になる「HTML5」は、覚えることも多いですが、
個人的には今までよりも、より文書の意味づけが明確にできるので好きです。
まだまだ覚えていかないところもいっぱいありますが、
実践も兼ねながらどんどん吸収していきたいと思っています。

自分で作っておきながら、なんなんですがこのサイトのデザインは
中々、気に入っております。われながらよくできたなぁと思っています。
（結構、納期が短くてあせりながら作ったのですが・・・）

これからもこのデザインを超えれるようにサイト作りに励んでいきたいと思います。

まさに

昨日までのホンダを超えろ

ですね。サッカーの本田のこともあってタイムリー？なので使ってみたくなりました。

タグ ：

html5

query_postsは非推奨？やっぱり悩む、Wordpressのページ送りについて。

カテゴリ:

wordpress

ウェブ制作

いまだにややこしいと思う、Wordpressのページ送りについて
自分なりにまとめ。

まずはページ送りを実装するうえで大事になる概念「クエリー」について
すこし前までは「query_posts」という関数がよく使われていたのですが、
そのときから使う際には注意が必要だとよく言われていました。
そして最近Wordpressから公式にこの「query_posts」が非推奨の関数と指定されたようです。
そして今後は「pre_get_post」という関数を使っていきましょうとなっているようです。

しかし私自身ここらへん正直よくわかりませんでした。

特に自分の場合だとWordpressで企業サイトなどを作ることのほうが多いので
トップページには会社の情報などをちりばめて、ブログは固定ページにもうけるようなことが多いです。

このときに、この固定ページにもうけたブログの一覧をページ送りするには
いままでほとんど「query_posts」を使ってきました。

[php]
query_posts( 'posts_per_page=5&paged='.$paged );//'paged='.$pagedはページ送り用
while ( have_posts() ) :
the_post();
the_title();
endwhile;
//ここのページ送りを設置する
wp_reset_query();
[/php]
こんなかんじっすね。
[caption width="386" align="alignnone"] ページ送りってちなみにこんなやつです。[/caption]
そして私はこれを「pre_get_post」に置き換えなければいけないのかと勘違いしていたようです。

それは下記、Wordpresフォーラムの回答から勘違いだったとわかったんですね。

・query_postsはメインクエリーを改変するためのもの
・query_postsはメインクエリーを改変するには効率が悪いので、pre_get_postsに切り替えていきましょう
・サブクエリーを発行するにはget_postsまたはWP_Queryのインスタンスを新規に作成しましょう

固定ページなどにブログ一覧なんかを設置する場合は「query_posts」じゃなくて「get_posts」か「WP_Query」で作りましょうってことですね。

なので自分は今は新しく作るWordpressサイトで固定ページなんかでページ送りが必要なものに関しては「WP_Query」を使うようにしています。ちなみに「get_posts」だとページングができまへん。「get_posts」でもできる方法知っている人いたら教えてください。

[php]

$my_query = new WP_Query( 'posts_per_page=5&paged='.$paged );//'paged='.$pagedはページ送り用
while ( $my_query->have_posts() ) :
$my_query->the_post(); // global の $post を上書きする

the_title();

endwhile;
//ここのページ送りを設置する
wp_reset_postdata();
[/php]

ちなみにWordpressのクエリーについてはこのサイトがとても参考になります。（というかすべてがここに書かれているようなかんじ）
WordPress ループ＆クエリーのモヤモヤを解消しよう！

もし、私のように勘違いしている人の参考になれば幸いでござります。

Wordpressで簡単なホームページを作る手順

カテゴリ:

wordpress

ウェブ制作

Wordpressでホームページを作るには？

Wordpressでホームページができるまでの手順を自分なりに解説してみたいと思います。
Wordpressって何？ってかたはこちらをご一読
まずは下記のようなデザインをPhotoshop（グラフィックソフト）などで作ります。 今回は架空のウェブ制作会社「阿呆ワークス」を見立ててデザインを作ってみました。 [caption width="1024" align="alignnone"] 完全におふざけです。ごめんなさい。[/caption] 手順としてはまずこのデザインからHTMLを作っていきます。 大まかに書くとこんな感じです。
[html toolbar="true"]


<html lang="ja">
<head>
<meta charset="utf-8">
<title>阿呆ワークス｜アホすぎて救いようの無いウェブ制作会社です。　SEOなんかくそくらえです。</title>
<link rel="stylesheet" href="style.css" >
</head>
<body>
<header>
<h1>アホワークス</h1>
<nav>
　<ul>
　<li><a href="">ホーム</a></li>
　<li><a href="">え？なに？</a></li>
　<li><a href="">一応できること</a></li>
　<li><a href="">全くできないこと</a></li>
　<li><a href="">何か？</a></li>
　</ul>
</nav>
</header>
<div id="main">
<section>
<img alt="阿呆ワークスの職場の雰囲気" src="images/top/main.gif" />
<h1>阿呆ワークスはアホすぎて救いようの無いウェブ制作会社です。SEOなんかくそくらえです。</h1>
</section>
<div id="able-to">
<section>
<h1>一応できること</h1>
<ul>
<li>どんぶり勘定</li>
<li>悪ふざけ</li>
　　　<li>メーゴーサー（沖縄の方言でげんこつ）</li>
</ul>
</section>
</div>
<div id="can-not">
<section>
<h1>全くできないこと</h1>
<ul>
<li>SEO対策</li>
<li>ソーシャル的なこと</li>
</ul>
</section>
</div>
</div><!-- #main -->
</body>
</html>

[/html]

Wordpressで作る場合もHTMLで書くということに変わりはありません。 これにしたがってスタイルシートも書いていきます。

[css]
/* Header
=================================================== */
header {
margin: 10px 0;
}
/* header nav
=================================================== */
header nav li {
float: left;
}
/* #main
=================================================== */
#main {
width: 980px;
margin:0 auto;
position: relative;
}

[/css]

こんな感じでだらだらと書いていきます。

で、HTMLとCSSが出来上がったら Wordpressに組み込んでいきます。

Wordpressではデザインを管理する部分は「テーマ」という機能で提供されています。
そのサイトの内容はそのままで「テーマ」を切り替えるとデザインが変わるという便利な機能です。
これを使えば内容は変えずに見た目だけを変えるという画期的なことが可能になってしまいます。

ちなみにWordpressのシステムのフォルダ構造は下記のようになっています。

ここで「.php」と拡張子のつくファイルがたくさん出てきますが、これでWordpressがPHPというプログラム言語で作られているシステムだということがわかります。 ちなみにFacebookなんかもこの「PHP」という言語で作られているそうです。

この「PHP」のおかげで更新機能などサイトを運営するうえで便利な機能を使えることができます。PHPで作るからこそ、さきほどいったような内容は変えずにデザインだけ「テーマ」という機能で切り替えられるといったことも可能になります。
[caption width="800" align="alignnone"] これがWordpressの更新画面[/caption]
これが管理画面がなくHTMLとCSSだけだとHTML編集ソフトなんかを使って編集して
FTPでアップしてみたいな感じのやり方になります。HTML編集ソフトは「Dreamweaver」や「ホームページビルダー」などです。

それはそれでいいのですが、更新機能があればインターネットがつながる環境さえあれば
HTMLがわかる人でもわからない人でも、更新機能を使って書き換えることができます。（最近ではスマフォのアプリでも更新できます。）
デザイン部分を触る必要がないのですから更新の際にデザイン部分を誤って編集してしまうこともありません。

[caption width="1583" align="alignnone"] こんなかんじで管理画面からテーマが選べます。既存のテーマや配布されているテーマもあり、ここからデザイン部分のみを自由に変えられます。[/caption]

そしてデザインを変えたい場合はその部分だけを編集して「テーマ」フォルダにアップロードすればいいのです。
そしてWordpressでホームページを作るうえでまず覚えるべきは「テーマ」です。「テーマ」ができれば何でもできる！

では、そんなことでテーマの簡単な作り方を見ていきましょう。

Wordpressのインストールやテーマに関してはGoogle先生に聞けば山ほど出てくるのでそれを参考に。
これとかね。

Wordpressのテーマを作る手順

まずはテーマフォルダを作ります。ここでは「aho-works」という名前にしました。 その中に「index.php」と「style.css」ファイルを作ります。 index.phpは何も書かなくてもこの時点では大丈夫ですが、style.cssにはコメントを記述する必要があります。 ファイルの一番上に下記のように書きます。

[css]

/*
Theme Name: aho-works
Theme URI:
Description:
Version: 1.0
Author: saniman
Author URI:
*/

[/css]

このコメントによってテーマファイルとして認識され名前や作者が管理画面で表示されるようになります。 ではこの作ったファイルをフォルダごとWordpressにインストールしてあるサーバーにアップロードしてみます。（FTPツールなどでthemesフォルダの中にフォルダごとアップします。）
そして管理画面にログインして「外観」のメニューに進むと今作った「テーマ」が認識されるようになります。

おっとプレビュー画面がグレーになっていますね。こちらは同じフォルダの中に「screenshot.png」というサイトのデザインのW600xH450の画像ファイルを入れてあげるだけで表示されるようになります。

ではこれを有効化リンクを押してテーマを有効化します。これでこのテーマが使えるようになったのです！素晴らしいですね！ではサイトを見てみましょう！

真っ白です。そうこの時点ではindex.phpに何も書いていないので真っ白なんです。

では先ほど書いたHTMLをもとにindex.phpに色々書いていきましょう。

[php]
<html lang="ja">
<head>
<meta charset="utf-8">
<title><?php bloginfo('name'); ?>｜<?php bloginfo('description'); ?></title>
<link rel="stylesheet" href="style.css" >
</head>
<body>
<header>
<h1><?php bloginfo('name'); ?></h1>
</header>

</body>
</html>
[/php]
PHPにはHTMLのタグをそんまま書くことができます。「PHPで動的にHTMLをはきだす」なんていったりしますが、
まぁPHPというプログラム言語を使って、こうゆうパターンはこれとか、HTMLの要素を部品化して条件によって自由に書き換えていくって感じでしょうか？（説明むずかしいっすね;）

そしてここからWordpress独特のテンプレートタグというものがでてきました。

[php highlight="1"]
<h1><?php bloginfo('name'); ?></h1>
[/php]
ここの部分ですね。このテンプレートタグとうものがWordpressには用意されていて、
このテンプレートタグを駆使してサイトを作っていきます。
覚えるのは大変ですが、サイトを作っていくうちに自然と覚えていくものだと思います。

さあ、この状態でアップしてみましょう。


サイトのタイトルが表示されるようになりました！


[php]
<?php ?>
[/php]

この部分はここはPHPのコードですよというのをコンピュータにわからせるための宣言です。 同じように続々と書いていきます。

[php highlight="5" wraplines="true"]
<html lang="ja">
<head>
<meta charset="utf-8">
<title><?php bloginfo('name'); ?>｜<?php bloginfo('description'); ?></title>
<link href="<?php echo get_stylesheet_directory_uri(); ?>/style.css" rel="stylesheet" >
</head>
<body>
<header>
<h1><?php bloginfo('name'); ?></h1>
</header>

</body>
</html>
[/php]

 

[php highlight="1"]<link href="<?php echo get_stylesheet_directory_uri(); ?>/style.css" rel="stylesheet" >[/php]

こちらはこの部分で「テーマ」のスタイルシートのあるフォルダのパスを表示させています。

[php]<?php echo ----[/php]

「echo」はPHPで結果を出力するという意味です。

そしてその後にスラッシュに続けてstyle.cssと書いてスタイルシートのパスを指定しています。 これでstyle.cssへのリンクを記述することができました。
なんだかHTMLで書くよりもややこしく感じてしまうかもしれませんが、 実際にこのコードを書くのはサイト制作を通して一度だけです。あとはその部分を部品化して、 それを使い回せばいいからです。そういった柔軟なことがPHPを使うとできることになります。 次々と書いていきます。

[php highlight="" wraplines="true"]
<html lang="ja">
<head>
<meta charset="utf-8">
<title><?php bloginfo('name'); ?>｜<?php bloginfo('description'); ?></title>
<link href="<?php echo get_stylesheet_directory_uri(); ?>/style.css" rel="stylesheet" >
</head>
<body>
<header>
<h1><?php bloginfo('name'); ?></h1>
<nav>
　<?php wp_list_pages(); ?>
</nav>
</header>
<div id="main">
<section>
<img alt="阿呆ワークスの職場の雰囲気" src="images/top/main.gif" />
<h1>阿呆ワークスはアホすぎて救いようの無いウェブ制作会社です。SEOなんかくそくらえです。</h1>
</section>
<div id="able-to">
　　　<section>
　　　　<h1>一応できること</h1>
　　　　<ul>
　　　　　<li>どんぶり勘定</li>
　　<li>悪ふざけ</li>
　　　　　<li>メーゴーサー（沖縄の方言でげんこつ）</li>
　　　　</ul>
　　　</section>
　</div>
<div id="can-not">
　<section>
　　<h1>全くできないこと</h1>
　　<ul>
　　　<li>SEO対策</li>
　　　<li>ソーシャル的なこと</li>
</ul>
</section>
</div>
</div><!-- #main -->
</body>
</html>
[/php]

ちょっと難しくなったでしょうか？
では、ここからサイトの要素を部品化していきます。
[html highlight="1,2-12,13" wraplines="true"]
<html lang="ja">
<head>
<meta charset="utf-8">
<title><?php bloginfo('name'); ?>｜<?php bloginfo('description'); ?></title>
<link href="<?php echo get_stylesheet_directory_uri(); ?>/style.css" rel="stylesheet" >
</head>
<body>
<header>
<h1><?php bloginfo('name'); ?></h1>
<nav>
　<?php wp_list_pages(); ?>
</nav>
</header>
[/html]

までの部分を切り取ってheader.phpとして保存します。 そしてそれをindex.phpで

[php]
<?php get_header(); ?>
[/php]

として読み込みます。 すると、こうやって書くだけで他のページでもこのヘッダー部分が使い回しできるわけです。便利ですね。 自動化できるところは自動化する。これがPHPを使うメリットです。
そんな感じで完成したindex.php（トップページ）のコードは下記のようになります。

[php highlight="1"]
<?php get_header(); ?>
<div id="main">
<section>
<img alt="阿呆ワークスの職場の雰囲気" src="images/top/main.gif" />
<h1>阿呆ワークスはアホすぎて救いようの無いウェブ制作会社です。SEOなんかくそくらえです。</h1>
</section>
<div id="able-to">
　　　<section>
　　　　<h1>一応できること</h1>
　　　　<ul>
　　　　　<li>どんぶり勘定</li>
　　 <li>悪ふざけ</li>
　　　　　<li>メーゴーサー（沖縄の方言でげんこつ）</li>
　　　　</ul>
　　　</section>
　</div>
<div id="can-not">
　<section>
　　<h1>全くできないこと</h1>
　　<ul>
　　　<li>SEO対策</li>
　　　<li>ソーシャル的なこと</li>
</ul>
</section>
</div>
</div><!-- #main -->
</body>
</html>
[/php]

なんだか最初書いたHTMLより短くなっている気がしませんか？
もっとちゃんとしたホームページならここに「フッター要素」「サイドバー要素」なんかもでてきますね。ここらへんも部品化して使いまわすことができます。
コードにすると
[php]
<?php get_footer(); ?>
<?php get_sidebar(); ?>
[/php]
とかですね。
PHPによって自動化できるところは自動化したり部品化したりしたおかげで、書くコードの量も少なくすることもできるのです。いいですね。

この「阿呆ワークス」のようなホームページなら、Wordpressでもけっこう簡単にできちゃいます。
（むしろWordpressでいちいちつくる必要があるのだろうか・・・）

まぁ、実際にサイトはもっと複雑で内容や見せ方なんかもページによって変えたりすると思いますので、そのときにこそ、Wordpressの便利な機能が生きてくるってことですね。

んで、個人的にはWordpressでサイトが作れるようになるにはまずHTMLとCSSが書ければ
なんとか作れてしまうんじゃないかなぁと思います。
PHPの知識は作っていくうちに覚えていくかなと思います。（自分がそうでした。）

今回はWordpressでホームページを作るのはそんなに難しくないんですよ〜
ということと合わせて、ちょっとWordpressでホームページ作ってみたくなるきっかけみたいなのを作れればと思い、記事を書いてみました。みなさんもWordpressでホームページ作りにLet'sチャレンジ！！

グラフィックデザイナーがコードを書けるようになったら、もう魔法戦士っしょ！

カテゴリ:

ウェブ制作

デザイナー

グラフィックデザイナーがコードが書けるようになれば、戦士が魔法を覚えて魔法戦士になったようなものだと思います。ただ魔法のほうにも力を割かないといけないので、戦士の力はのびなくなる可能性もあると思います。一流の戦士としての攻撃力に磨きをかけるか、魔法戦士として攻撃の幅を持たせるか迷うところですね。まぁこればっかりはどっちを選ぶかはプレイヤーの自由ですよね。やりたいようにやればいい。

あ、書く事終わっちゃた。

いやいやいや、今回は戦士が魔法を覚えるメリットについて書くのでした。

まぁこれについては、色々なブログで書かれているのでわざわざここで書かなくてもいいかなと。

また、終わっちゃったじゃん。

いやいやいや、散々書かれてはいるとは思うのですが、とりあえず自分の意見も書いておきます。それはズバリ。

メリットは楽できることだと思います。

自分の性格として反復作業、同じ作業の繰り返しということに、とてつもなくストレスを感じます。これなんとか自動化できないかな？と。

単純作業はコンピューター君にまかせて、私はクリエイティブなことに時間を割きたいんです。そしたらもう必然とコンピューター君に上手に命令できる彼の言語を学ばないといけないんですね。彼は人間じゃありませんから！！！機械語と言われるプログラミング言語しかわかりませんから！

だから私はコードを勉強しました。そして魔法戦士（なったかな？）になりました。

まぁでも、どうしてもオラ、コードとかはわかんねっぺ。じぇじぇじぇ！なんだこの暗号みたいなやつ！ってな場合はコンピュータ君と仲良しのプログラマー君と友達になるといいかもしれませんね。

「ねぇねぇ、これコンピュータ君にお願いしてみてよ。自動化してみてよねぇ。」

みたいな感じで。

私がかわいい女性デザイナーならこうゆうふうにお願いすれば、プログラマーの方は大概頼みを聞いてくれたと思うのですが、いかんせん沖縄育ちのソース顔なんで、お願いしても大概煙たがられまして・・・その煙たがる顔を見たくなくて、コードを覚えたってのもあるかもしれません・・・

まぁ、プログラマーが魔法を使えるみたいな例えで書いてしまいましたが、これはあくまで例えなので、現実の世界ではデザイナーもプログラマーも魔法使いだと自分は思ってますので。

Webデザインする上で大事だと思う「Webっぽさ」という感覚。

カテゴリ:

WebDesign

ウェブ制作

仕事しながら感じたことなのですが、

Webデザインをするうえでの出来上がったデザインのWebっぽさというのでしょうか？

ここは意外と小さな部分なようで結構大事な部分ではないかな？と思ったので考えを書いてみます。

自分もWebデザインを始めたころによく言われた気がするのですが、

「このデザインだとWebっぽくない」とか

「Webだとだいたいこんな感じだよ」といったニュアンスです。



紙のデザインを学んでWebのデザインを始めてやった時に、

やっぱりこの「Webっぽさ」っていう感覚がよくわからないんですね。

言われてもピンとこない。

自分もようやく最近この「Webっぽさ」というのが感覚でわかってきたと思うのですが、

やはり紙のデザインをメインでやっている方がWebのデザインを最初にやった場合には

この「Webっぽさ」がデザインからあまり感じられない気がするのですね。

自分も実際の仕事で経験があるのですが、Webサイトのデザインをプレゼンする時に

デザインしたものを紙にプリントしてお客さんに見せるのですが、

見ると見栄えがいいので、「いいね」という感じでOKをもらってそれを

いざ組んでブラウザで確認すると何かしっくりこないってことが結構あったりするんですね。



これはおそらく上記の「Webっぽさ」に起因していることではないのかなぁと個人的には思っています。

ではその「Webっぽさ」って一体なんなんでしょうか？

それは「Webらしさ」とも言えることだと思うのですが、

「Webらしさ」とはWebという媒体の特性に見合った、振る舞いや見た目、ようするにデザインですね。

それを理解するにはまずはそのWebの特性を知る、自分の中で感覚として落とし込んでいるということが大事ではないかと思います。

Webの特性、そして紙媒体との大きな違いというのはまず「動きがある」ということではないでしょうか？紙媒体の場合だと動きがまずありませんね。

そして、Webの場合は見るだけじゃなく「使う」という要素も入ってくるので、

リンク先がある部分などには明示的に「動き」があるということをデザインとして伝える必要があります。その観点からボタンはボタンとしてわかるように、リンク先はリンク先としてわかるようにというデザインの必要性がでてくるということです。

で、自分がこの「Webっぽさ」っていうのを感覚としてわかる一番の近道はやっぱりHTMLのコードを書けるようになることじゃないかな？と思っています。



それはHTMLコード自体がコンピュータ（見た目を認識することのできない機械）に
『これは画像ですよ』『これはリンクですよ』といったふうに、ホームページの中にある要素の役割を伝えるものだからです。

コードを書いていくなかで、そういった見た目だけでなく機能という部分で、実際に使う人のことをイメージしながらデザインするということを学んでいけると思います。

もちろんそれはコードを書けなくても学べることだと思いますし、意識するだけですぐできることだとは思います。（コードは書けなくてもいいんじゃないかということはこのブログの記事でも書いています。）

ただ、書けるようになったほうが「こうゆう風に考える事が大事ですよ」と知識だけ頭に入れるより、手っ取り早いって私は感じています。私自身が知識を頭に入れるだけでは実戦であまり役に立たない、体が動いてそれを感覚としてわかっているということが何より大切だと思っているからです。

まぁ、とりとめもなくこれといったまとめもなく書いてしまいましたが、昔までのウェブデザインの流れとしてボタンはボタンとしてわかるようにはっきりとグラデーションをつけたりなんてことがありましたが、最近ではなるべくシンプルにデザインすることに流れがいっていますので、（ミニマルデザインというらしいです。）やたらサイトにグラデーションを使うのはイケてないかもしれません。

新しいiPhoneのiOS7のアイコンなんかも本当にう〜っすらグラデが入ってるか、もう本当に入ってないかですもんね。ただアイコンは角丸になっていることで押せるということは大体わかりますもんね。



なので最低限その機能がわかるようにデザインするっていうスタンスがこれからはいいのかもしれませんね。私自身もシンプルデザイン大好きなので、でもその中にも最低限のWebっぽさ（使いやすさ・わかりやすさ）というのを追求していければなと思っています。