このブログの作者ーーーーーーーーーーーーーーーーーーーーーーーーーーー
宮古島生まれ、那覇の都会育ちの、WEBデザイナー。
本質を、エレメントで例えると「土」。大地のように誰のことも受け入れられるが、無口、動かない、人に染まることがあまりない。
好きなものを聞かれると、決まってレゲエと馬というが、馬に関して彼が乗ったり見に行ったりしたことを聞いたことがないばかりか、モチーフの何かを所有してるのをみたことがないので、謎である。レゲエに関しては、よく音楽を聴いているものの、バンドを組んでいたという件の話では、その歌の音程とリズム感によって、多くの謎を残している。いじけると、体育座りで唇を突き出す、中二病の気がある。大の酒好き。好きな酒は聞かれるたびに、変わる。言動は、多くの謎があるため、不思議系や天然系を通りこして、自然系と呼ばれている。
自称、『食にうるさい。』

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チャレンジ!!

カテゴリ:


先日、Wordpressで画像をアップロードして、

「中サイズ」で投稿しようと思ったら、なんと「フルサイズ」しか選べない状況でした。

(普通はフルサイズ、大サイズ、中サイズ、サムネイルと選べる)

色々調べたら、どうやら「php-gd」という画像をあつかうライブラリがサーバーにインストールされてないことが原因のようでした。私の使っているサーバーは「さくらのVPS」で、

そこらへんのライブラリは入れてなかったんですね・・・

今回でとりあえずPHPをインストールするときはライブラリも全部インストールしちゃったほうが

いいんだなということを学びました。

んで、インストールするべく「yum」でやってみたのですが、

なんかこんなかんじのエラーが・・・

[bash]
Setting up Install Process
Resolving Dependencies
--> Running transaction check
---> Package php-gd.i386 0:5.1.6-27.el5_5.3 set to be updated
--> Processing Dependency: php-common = 5.1.6-27.el5_5.3 for package: php-gd
--> Finished Dependency Resolution
php-gd-5.1.6-27.el5_5.3.i386 from updates has depsolving problems
--> Missing Dependency: php-common = 5.1.6-27.el5_5.3 is needed by package php-gd-5.1.6-27.el5_5.3.i386 (updates)
Error: Missing Dependency: php-common = 5.1.6-27.el5_5.3 is needed by package php-gd-5.1.6-27.el5_5.3.i386 (updates)
You could try using --skip-broken to work around the problem
You could try running: package-cleanup --problems
package-cleanup --dupes
rpm -Va --nofiles --nodigest
The program package-cleanup is found in the yum-utils package.

[/bash]

オーマイガシット!と思いまして。
Google先生に聞いてみました・・・

でも、ぜんぜん成功しないわけですよ・・・これが。

で、思い返してみるとGoogle先生にのっていた参考例はほとんどが
CeotOS6以上のものばっかで・・・

おれのやつは5.xじゃんと思って・・・

ひょっとしたら5.x系にはPHPの最新の5.4自体が入らないんじゃねぇか?と思い、
[bash]
No package php54 available.
[/bash]
こういうのも出てたのでね。
5.3なら入るかもしれんと思い以下のコマンドをたたいてみると

[bash]
sudo yum install php53
[/bash]

見事にインストール成功!!
続いて、ライブラリ全部いれちゃおう!ってことで
[bash]
sudo yum install php53-*
[/bash]
ってやって、サーバーを再起動。
[bash]
sudo /etc/init.d/httpd restart
[/bash]
ってやったら、無事Wordpressの画像がリサイズされて
アップロードされたのでした・・・

てかWordpressのブログをさくらVPSで運営してから二年以上、
いままで気づかなかったおれって・・・

それだけ画像をアップロードしてこなかったってことですね。
とりあえず、これからはPHPインストールする際は
ライブラリも全部インストールすることにします。そのほうが無難そうなんで。

あと、CentOSも6以上にしたほうがいいのかな〜。
nginxも試してみたいけど、そんだけ負荷がかかるサイトも運営してないしな〜なんて思いもありつつ・・・

Thinkpad R500の上半身を交換したの巻

カテゴリ:
先日、ノートパソコンを開いてみると・・・

dette 617
こんなことになってしまっておりまして・・・

困ってしまって、サポートセンターに問い合わせてみたのですが、

「修理代は見てみないとわかりませんが、おそらく購入した値段よりも高くなってしまう可能性が高いかと思われます。」

という旨を言われ、こりゃまちがいなくそうなるなと思って

自力で直すという選択に。

色々検索するとThinkpadシリーズは割りと交換しやすいノートパソコンのようでした。

そこで「ヤフオク」で新品同様のThinkpad R500の

上半身を落札させてもらって、(結構あるもんですね。総量合わせて5000円ぐらいでした)
017

2〜3日で届きました。じゃじゃ〜ん。綺麗です。

こちらを壊れた上半身と取り替えてみました。

019

レノボのサポートサイトを見ながら、分解をしていきます。

まずは後ろのねじをはずして、

020

そしたら、トラックパッドの部分とキーボードの部分を

外すことができました。

021

そして、手順どおり上半身も外しちゃいます。

022

古い上半身よ、さようなら。

023

んで、新しい上半身を装着!

配線などつなげて、キーボードもトラックパッドも元通りに取り付けて・・・

024

無事、動きました〜。きれいきれい。

しかも、うれしいことに古い上半身には内蔵カメラが

なかったのですが、新しいのにはついていて、

使えるようになりました〜。(ドライバインストールして)

大体修理作業にかかったのが1時間ぐらいでしょうか。とりあえず、めでたしめでたし。

結構できるもんですね。楽しかった〜

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

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

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

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

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

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

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

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

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

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

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

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

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

みたいな感じで。

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

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

カテゴリ:
超昔に同じような記事を書いた覚えがあるのですが、

私のバックアップミスでその記事はなくなってしまったので、

ここでふわ〜っと改めて書いてみることにします。

私のおかしな考えのひとつに、

制作物はすでにこの世に生まれる予約をしていて、

それが作り手を通して世に産み落とされるっていう考えがあります。

だから、いつも自分がものを作るというよりも

そのものが生まれてくる手助けをしてあげているようなイメージで

デザインなりものづくりをしています。

例えば、デザイナーはデザインする時に

イメージを浮かべて作っていくと思うのですが、

それもすでに産まれてくるはずの制作物が

デザイナーにこんな感じにしてくださいっていったふうな感じで

テレパシーみたいなものを送っているから

イメージが浮かんでくると思っています。

頭おかしいと思うかもしれませんが、マジな話です。

で、いいデザイナーさんってのはこのテレパシーみたいなものを受け取るのが上手で、

それを形にするのが上手だからいいデザインを作る事ができると思っています。

それは経験の中で磨く事もできるし、もちろん持って生まれたものもあると思います。

それはイタコさんも同じで、イタコさんは目には見えない世界の人々のテレパシーみたいなものを受け取るのが上手な人。 受け取る物がちがうだけでやってることはデザイナーと一緒じゃんってことです。

イタコさんもその能力を天性で持っているのでしょうが、修行をして磨く事もあると思いますし、色々経験して上手に自分に落とす事ができることができるようになるのではないでしょうか?

それで、それを上手にお客さんに伝える事ができる。その受け取るものと伝え方がデザイナーとイタコでちがうだけかなと。

これは色々な職業に当てはまることなのかなとも思うのですが・・・

カテゴリ:
仕事しながら感じたことなのですが、

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っぽさ(使いやすさ・わかりやすさ)というのを追求していければなと思っています。

カテゴリ:
いまどきWEBデザイナーはWordPressもjQueryも出来て当たり前なの?
こちらの記事を読んで、自分が前回書いた記事にグラフィックデザイナーがコードを書けるようになるには?といった内容を書いたのですが、書けるようにならなくてもいいじゃんってのもアリだなぁと思って色々書いてみたいと思います。
デザイナーが全部できる必要はない

これは確かにそうですよね。こちらの記事にも書かれていたのですが、全部できなくても確実なデザインをあげてくれるデザイナーなら、そっちのほうがお客さんやディレクターなど仕事を依頼するほうからも重宝されますもんね。



逆に全部ある程度まんべんなくできるけど、あげてくるデザインがいまいちパッとしないと使うほうも使いにくいかもしれませんね。

一方でメリットのほうもあげてくれています。
(デザイナーが何でもできちゃうと)打ち合わせそのものも楽になるでしょう。なんせ一人に説明すれば済んでしまうので、ディレクターさんは同じ様な仕様の話を何度もしなくて済みます。

これも確かにそうだと思います。わからない場合だと「プログラマーに確認してみます。」ってなって、もう一度そこから仕様を詰めたり、できると思って受けたら実は難しかったみたいなことも発生しちゃうかもしれません。ただそこはプログラマーも含めた制作メンバーで打ち合わせに向かえば、防げることかもしれませんね。



あと、これは自分がまだコードを書けないときにコードの書ける先輩からも言われたことがあるのですが、
細かな事を知らないからこそ作れる物がある

下手にコードを書けるようになると、奇抜だったり、誰も考え付かなかったようなデザインを作れなくなるんじゃないか?っていうことだと思うのですが、それもすごくわかります。

自分もそんな感じで誰も考えつかないようなデザインというか、すごい発想のデザインを作ってくるデザイナーさんがいたらそんな人と一緒に仕事してみたいなぁとは思います。

自分なんかはコードが書けないころに作ったデザインなんかを見返してみても、まぁ平凡でありがちなデザインを作ってるな〜って思いますもんね。ひたすら人真似でしたね。なので、自分は奇抜さよりも使いやすさのほうを意識してデザインするようになっていきました。



あと、やはり自分がコード書けるようになりたいって強く思った理由のひとつに、コードが書けないとサイトのデザインの何から何までもPhotoshopで作らないといけなくて、それをプログラムを書く人に見せてこんな風に作ってくださいって支持するのがめんどくさかったってのがあります。これHTMLで書いてブラウザで表示させてしまったほうが早くね?って思って、めんどくさがりな私はコードを書ける技術を渇望しました。

めんどくさがりな人ほどコードを書ける技術ってのはありがたいことかもしれません。

そして結論としては
(何でもできれば)BestかもしれないがMustではない。

まぁこれも考え方やその人の得手・不得手など、色々でいいんじゃない?ってのは自分も同意見です。そして記事の最後にも書いてあるのですが、まずはお客さんに恵まれることが一番の幸運じゃないのかな?ってことですよね。



仕事のなかで求められることに応えていった結果、今の技術を習得していた。ってのも結構多いのではないでしょうか?そして、それはお客さんの求めることなので必然的に社会的にも必要性のある技術になるのではないでしょうか?ただそれも時代とともに変化しますので、その波に上手に楽しく乗って、お客さんにもどんどん新しい提案をして作っていければ制作者冥利につきるのかもしれません。

まぁ自分は一度コードを書く快感を覚えてしまったので、もっともっと書けるようになりたいって思いながらいつも仕事してます。変な話し、めちゃめちゃコード書けるようになってオープンソースのプロジェクト立ち上げて大成功してGoogleやFacebookからスカウトが来ても断って・・・みたいな妄想をしてしまうぐらいです。てかこうゆう人は本当にいるんじゃないですかね?

まぁそれは完全にただの妄想ですが、やはり世界と闘うには「個」の力をのばさなければいけませんね。目指すはビッグクラブですよねやっぱり。



まぁ自分の想いをまとめると、
「もっと上手くなりたい」

by 中村俊介(横浜F・マリノス)

http://www.soccer-king.jp/sk_column/article/111646.html
ってことですね。

こんな締めですいません(^^;)

カテゴリ:

コードを書くというグラフィックデザイナーにとっての大きな壁


グラフィックデザイナーがウェブデザインの技術をはじめに習得する時に

やはり一番大きな壁が「コードを書く」ということではないでしょうか?

個人的には「デザインを考える」のと「コードを書く」ことは使う脳もちがうのではないかな?と思うぐらい別の技術のような気がします。

実際にグラフィックデザインの世界からウェブデザインの世界へ飛び込んだ自分の経験からもグラフィックデザイナーにとって「コードを書く」って言うのは、とてつもなく高いハードルなのではないのかな?と思います。

まず最初に本などを読んで勉強すると思うのですが、やはり使う脳がちがうのではじめのうちは中々頭に入ってこず、ある程度タグの名前や大まかな作り方がぼわ〜っと頭に入ってくる感じだ思います。(この時点では全然仕事で使える技術は習得できてないと思います)


実際に仕事でコードを書くという恐怖


そしてそこから仕事で実際に作業するとき、

コードをさわる、書き換えることが怖いと感じてしまう人も多いのではないでしょうか?実際に自分もそうでした。

自分の浅い知識でコードを触るとサイトデザインが崩れてしまうのではないか?

正しいタグを使ってないダメなコードになってしまうのでは?など。

でも大丈夫です。初めは崩れますし、適切なコードを選択できなかったり上手くはいきません。その上手くいかない所を修正して直しての繰り返しが上達への第一歩だと思います。

自分も本当に最初のころは四苦八苦しながら作業していました。でも仕事の現場でも本や検索をしながら作業にあたれるのがこの仕事のいいところなので、恐れることなくガンガンコードを書いていってほしいと思います。

覚えたてのころに職場に修正箇所など適切なアドバイスをくれる優しい先輩に恵まれるとすごくいいのでしょうが、私の経験上そんな先輩には巡り会ったことはありませんw

ものすごく厳しく間違いを指摘されて、「すいません、すいません」と言いつつ、焦りながらいつも作業していました。


経験から得られる崩れたときの対処法


ベテランの方でも修正段階では崩れたりすることもあると思います。

ただベテランの方はやはりいままでの経験のなかで崩れたパターンが頭でわかっているので、その経験の中から解決策を見いだしていくスピードが断然に速いです。

やはり、そういったことからもコードを書く技術の習得への一番の近道は失敗を重ねることかな?と思います。

頭でわかっているのと、実際に失敗して学ぶのとでは後者の方が確実に身に付きますから。

なので仕事で実践するまでにその失敗を自分のホームページ作成などでいっぱい繰り返しているとびびらずに作業にあたることができるかもしれませんね。

コーディングの練習のため、レンタルサーバーを借りてみたものの・・・


かと言って、追いつめられないとできないのも人間ですからね。

自分もウェブデザイナー駆け出しのころは先輩から

「とりあえず自分のホームページ作ってみたほうがいいよ」

とずっと言われていたのですが、レンタルサーバーだけ借りてWordpressなんかをインストールしてはみたものの、サイトのデザインをいじるまでにはいたらず、ずっと放置してました。


コードの書けないウェブデザイナー


なので最初のころは私はPhotoshopでデザインだけ作ってコードが書ける先輩にそれを渡すだけのWebデザイナーでした。

それでもやっぱり仕事していく中でHTMLとCSSを触る機会はやってくるので

仕事をふられて難しそうだなぁと思っても大体「できます」と見栄を切って

自分で自分を追いつめながら仕事の中で覚えていきました。

「できます」と言ってできなかったらめちゃくちゃ怒られるし、みんなに迷惑かけますからね。そう言っちゃった時点で結構必死になるんですね。

ただ、本当にどうにもできそうにないものは正直に「できません」って言ってました。

そういうチャレンジをどんどんさせてくれる職場なんかだと成長の度合いも違うかもしれませんね。(ベンチャーや小さい会社なんかはそう意味で色々やらせてくれるのでいいかもしれません)

少しでもコードの書き方を覚えると後は加速度的に技術を習得


そして面白いものでそうやって仕事の中で覚えてくると楽しくなって

自分のホームページも作りたくなるものなんですね。

なのである程度わかってくると家に帰っても自分で色々調べて習得していって

そこからは加速度的に技術を習得することができました。



なので、産みの苦しみではないのですが

最初の駆け出しのころの技術が身に付いてないときが一番苦しいかもしれません。

その一番最初でつまづくと習得できずにコードを書くのを諦めてしまったりするのかもしれません。

つまづかないコツとしては、やはり「あせらない(すぐに結果を求めない)」ことが大事かなと思います。

どうしても、習得の時間には個人差があるもの


もちろん習得の時間は個人差はあると思います。

それまでにある程度なにかしらプログラミングをやった経験のある人など、それこそ1日〜3日ぐらいで習得できてしまう人もいるのではないでしょうか?

ただやっぱり今までグラフィックデザイン一本で来た人がコードを書く技術を習得するには、結構時間がかかるんではないかな?と思います。自分自身コードが書けるようになったなと思えるようになったのはウェブ業界に入って3年ぐらいたってからでした。



その中であせらずにコツコツやっていけば必ず書けるようになると自分に言い聞かして、あきらめないってことが一番大事なのかな?と思います。

あとはつまづく、つまづかない関係なくもうそれをやるしか無い状況に自分を追い込むということも大事ですかね?

私のウェブデザイナーへの転向事情


自分の場合、印刷物の制作会社からウェブ制作会社に転職したので、その時点でウェブの技術を習得せざるおえなかったですし、逆を言えばウェブのことだけさせてもらえたので(それでも3年かかりましたがw)それがよかったかな?とは思います。

例えば、転職した会社が広告代理店の制作だったりしたらウェブ以外にも紙やCMの制作など色々やらないといけないので、もしこういった環境だったらコードを書く技術を習得するのはもっと時間がかかったのではないかな?(もちろん個人差はあると思います)と思っています。

まとめ(あきらめたら試合終了)


まぁ、それでもどんな環境であっても、あきらめなければ絶対に習得できると自分は思います。(あきらめたらそこで試合終了ですよby安西先生)

とにかく失敗を繰り返してなんぼです。とにかくおそれずに実践でどんどんコードを書いていってほしいです。

それが間違いなく自分の糧になりますから。

「失敗は成功のもと」ですからね。
わたしは、今までに、一度も失敗をしたことがない。
電球が光らないという発見を、今まで二万回したのだ。

by トーマス・エジソン

カテゴリ:


ほんとすいません。三日坊主やろうです。はんぱものです。

これ書いてまた何年も更新しないかもしれないですが、

まぁ、あれですよ。感謝ですよ。

いきなり気持ち悪いですが。特に詳細はいいませんよ。

ちょっと昔の自分なら、すべてに感謝するって納得できるけど、1ミクロンぐらいは疑ってた。

最近は1ナノぐらいしか疑いはない。。。

 

いや、ゼロだよ。限りなくゼロだよ。無だよ。

色即是空。空即是色だよ。

 

よくわかんね〜。



みんなありがとう。

最近、すごく好きな言葉。

シャンティ・シャンティ。

 

響きがいいじゃない?

サンスクリット語で心の平安という意味らしいです。

確かに心で「シャンティ・シャンティ」って唱えると落ち着くんです。

天の言葉ですね。

自分にはなんとなく「感謝・感謝」っていうニュアンスに感じるんですが。

魔法の言葉「シャンティ」。

そんな感じで超ひさしぶりの更新でした。

シャンティ・シャンティ。

カテゴリ:
このブログのメインビジュアルにもあるように、私はレゲエ好きです。
私の青春はレゲエだったと言っても過言ではありません。ということはレゲエを聴いている時は、私はいつでも青春に戻れるということです。

ラック企業に勤めている間も友達とレゲエサウンドグループを作って毎月イベントを開催していました。



よく考えるとすごい労力だったと思います。ブラック企業で青春を捨てたと書きましたが、青春の半分はブラック企業にその半分はレゲエに捧げたというのが、本当のところです。

元々、私が独学でグラフィックソフトの使い方を学んだのも自分たちのサウンドグループのイベントでかっこいいフライヤーを作りたいって動機からでした。



そんな私も最初からレゲエに興味を持った訳ではありませんでした。私は元々、高校二年の頃ターンテーブルを買ってヒップホップを中心にスクラッチの真似事などをやっていました。ターンテーブルを買ったきっかけは後に一緒にサウンドグループを結成するK君の兄貴がターンテーブルを持っていて、家に遊びにいった際に目にしてからです。その兄貴はレゲエをやっていたのですが、私は最初はあまりレゲエに興味を持ちませんでした。

それから、時がたち二十歳の成人式の日に私とK君でヒップホップとレゲエのイベントをやって、そのあとにもまたイベントを何件か一緒にやって、K君からの提案でサウンドグループを結成するにいたりました。

結成したすぐあとに、ブラック企業にも勤めるのですが、本当にいま考えてもめまぐるしい日々でした。

そんな中で必死にレゲエの事を勉強しイベントも毎月こなして、どんどんとレゲエの魅力にとりつかれていきました。

そのグループはK君と私の些細な喧嘩で解散してしまったのですが、解散後 も一緒にイベントをやったり離れていても今も仲良しで、たまに連絡を取り合っています。

レゲエの音楽の魅力を語るときりがないのですが、自分にとってはあのころ本気で情熱を傾けたものとして常に心の中にあって勇気づけてくれる友というか、とにかくすごくあたたかい存在です。ただの音楽のジャンルとしては到底くくれない、とてつもなく大きなものです。

そして、この存在。情熱は消え去ることはありません。実際にK君は新しいサウンドグループを作ってまだしっかり活動してますし、あとひとりのメンバーU君もバリバリやってます。
私も負けてはいられません。なんていったてレゲエを聴いてる限りはいつまでも青春でいられるんですから。素晴らしいです。レゲエ最高。ワンラブ。No Reggae No Life。

このページのトップヘ

見出し画像
×