40歳からWebデザイン

40歳からのWebデザインを始めた奮闘記です!

立ち止まる時があってもいい

こんにちは!先日、ありがたいことにWebサイト制作の依頼を頂きました。断ってしまいましたが。僕はまだ修行中の身なので。そのことをお伝えしましたが、気が変わったら連絡をくださいと言われました。ありがたいことです。

肝心のWebデザインの勉強は立ち止まっています。休憩している状態です。いや、何もしていないと言ったほうがはやいです。ここ数日はDreamweaverを起ち上げることすらしていません。

7月から勉強を初めて、そろそろ4ヶ月が経とうとしています。ちょうど、こういう立ち止まる時なんだと思います。まあ、僕はこういう時があってもいいと思っていますし。ここでやめてしまわないようにしないといけませんが、、、。とにかく、今は一息つきます。また走り出せるように、、、。いや、いきなり走るのはちょっとプレッシャーなので、「歩き出せるように」に変更(笑)

何もかもストップさせると、本当にWebデザインの勉強をやめてしまいそうです。なので、このブログの更新は続けていこうと思います!!近況のご報告でした。

たぶん僕はGoogleWebDesignerを使わないと思う

ダウンロードしたその日しか触っていなかったGoogleWebDesigner

初めて見た時は、なんかすごそうで、おおーって思いましたが、結局、ダウンロードしたその日に少し触っただけでした。その日以降は、全く触っていません。これから少しずつ触っていこうと思ってはいますが、正直なところ、たぶん、僕は使わないと思っています。

CSSは埋め込み(エンベデッド)

「デザインを表示します」で作ったもののコードを見てみると、headの中にCSSが記入されていました。 なるほど。これ、外部化できるのでしょうか?メニューにはどうやらそれらしきものがありません。GoogleWebDesignerでできなくても、HTMLファイルができあがったらDreamweaverで開いて外部化するという手があります。でも、面倒です。まあ、まだベータ版ですし、無料のものなので多くを望んではいけませんが。

クラス名

クラス名も長くて訳の分からないものが勝手に付けられるので、後で色々やろうとすると探すのが大変でした。やはり、コードでなんとかするというような感じではなさそうです。コードも見られるという程度だと思いました。

新規作成CSSはコードオンリー

CSSを新規作成できますが、コードオンリーです。DreamweaverCCのCSSデザイナーのようなものはありませんでした。コードを書かなくてはいけないとなると、GoogleWebDesignerでなくてもいいかなと思いました。

コーディング向きではない

Webサイトを作るという観点から考えると、直感的な操作はMuseに軍配が上がります。また、コーディングならDreamweaverに軍配が上がります。しかし、そもそもGoogleはGoogleWebDesignerでバナーやパーツなどを作るように言っています。なのでコーディングやページデザインをしようとする私が悪いだけなのです。

私は初心者なのでFlashProfessionalもEdgeAnimateも使っていません。なので、どうやらGoogleWebDesignerの本当の良さがわからないのだということに気づきました。そもそもDreamweaverと比較している時点で的外れです。すみません。

便利ツールのメモ サイトマップ自動生成ツールとリンク切れチェックツール

自分のメモとして投稿します。

サイトマップの作成

Googleウェブマスターツールを見るとサイトマップがないと書かれていたので、作成して送信することにしました。色々調べた結果、下記のサイトにたどりつきました。

サイトマップを作成-自動生成ツール「sitemap.xml Editor」

早速、自動生成して送信しました。すぐに登録されました!!

リンク切れを調べる

リンク切れを調べるツールもありました。使ってみました。おおー、便利です!!

リンク切れチェックツール

WebデザインでPhotoshopは何に使うもの?

Photoshopを何に使うのかわからなかった

f:id:kobitom:20131012105040j:plain

実は、Photoshopの勉強を始めてからしばらくの間、「これいったい何に使うものなの?」と思っていました。私は、グラフィックソフトはIllustratorから勉強しました。Photoshopの勉強を始める頃には、すでにIllustratorでチラシを作ったり、Webサイトのパーツを作ったりしていました。なので、Webサイトの制作はIllustratorDreamweaverだけあればいいんじゃないの?と思いながらPhotoshopの勉強をしていたことを覚えています。

長い文章よりも一枚の写真が全てを物語る時がある

実際に、Webサイトを制作してみると、IllustratorよりもPhotoshopをよく使います。Webサイトにとって、写真はとても重要なパーツです。人は、Webサイトを開いたら、まず無意識のうちに写真を見てしまいます。レイアウトの観点からは、写真を配置することで図版率を上げることができます。写真があるとWebサイトの表現が豊かになります。写真が全てを物語る時もあります。

質感の高いパーツをつくれる Photoshop

WebサイトのパーツはIllustratorでも作れます。私の場合、Illustratorで作る方が簡単です。これには個人差があると思いますが。Photoshopは工程が多いというか。その代わりPhotoshopIllustratorよりも質感の高いパーツを作れます。時々、IllustratorPhotoshopを組み合わせてパーツを作ることもあります。まだ、本の通りに作っているだけですが、、、。この本はおすすめです。これを参考にして作っています。楽しいです!!

Photoshopの絶対に押さえておくべきポイント

Photoshopは「選択範囲」、「レイヤーマスク」、「トーンカーブ」、「スライス」が重要だと思います。はじめは、選択範囲の重要性がいまいち理解できませんでした。選択範囲という言葉もなんか地味な感じがしましたし。「なにそれ?」とか思いましたよ(笑)それが今では、選択範囲を使えなければ、Photoshopを使えないに等しいとまで思うようになりました!!極端ですね(笑)

スライスの記事です 「スライス」

写真のレタッチ 何はなくともトーンカーブ

トーンカーブ、レベル補正はとてもよく使います。はじめのうちは、とりあえず、これだけ覚えておけばなんとかなると思います。

f:id:kobitom:20131012105052j:plain

 写真が楽しくなった

私は写真にはまったく興味がありませんでした。何が面白いのかわかりませんでした。ところがPhotoshopを通じて写真に触れているうちに写真が楽しくなってきました。今では、お金を貯めてCanonの一眼レフカメラが欲しいと思うようになりました。EOS70Dは高いので、値段が下がった60Dを狙っています。 Photoshopは趣味でも使えるので楽しいです!!

強制改行<br> SEO対策の初歩

強制改行<br>はレイアウト目的で使ってはいけない

今日は初心者ならではの話です。強制改行<br>はレイアウト目的で見た目を整えるために使ってはいけません。SEOの観点から良くないそうです。私はこれまでレイアウト目的で見た目を整えるために<br>を使っていました。なので、HTMLを直しました。

Dreamweaverでも、はてなプログでも、強制改行はShift+Enterです(Macの場合はShift+Return)。知らずに使っていた方は注意が必要です。

悪い例

こんにちは!<br>

今日はいい天気ですね。<br>

住所<br>

氏名<br>

TEL<br>

良い例

<p>こんにちは!今日はいい天気ですね</p>

<p>住所</p>

<p>氏名</p>

<p>TEL</p>

段落の区切りや余白などを入れる目的で、br要素を使うことはできません。

参考図書 (株)アンク著 『 HTML5&CSS3辞典 第2版』2013年4月。

一つの文書として構成されてるものは<p>でくくり、見た目はCSSで整えるとSEO的に良いそうです。詩については<br>を使っても問題ないそうです。

<span>を使った改行

HTML <p>こんにちは!<span>いい天気ですね</span>

CSS span{display:block;}

HTMLは上記のように書いて、CSSで改行させることができます。 <span>で囲った箇所が改行されます。

とても初歩的な事で恐縮ですが、参考になれば幸いです。

見せるWebパーツ作りに向くGoogleWebDesigner!!

GoogleWebDesignerで見せるWebパーツを作る

GoogleWebDesignerは見せるWebパーツを作るのに向きます。サイト構築はDreamweaverの方が向きます。やはり、SEOをやるならコードです。基本はHTMLのマークアップです。

しかしですよ、この2つ、DreamweaverとGoogleWebDesignerを合わせて使えば、見せて楽しい、読んで楽しいWebサイトを作れると思います。あっ、そうですね、AdobeはそれをEdgeAnimetionで実現しようとしているのですね。その前に、Flashがありましたが、潰されてしまいました。今は、通信速度も速いのでFlashが重くて、ストレスを感じるということはないように思います。でも、それは日本での話で、世界は広いのです。まだまだ通信速度が遅い国や地域の方が多いのでしょうね。

ハズレアプリもあるGoogle たとえばGoogleWaveとか

Googleはハズレアプリもあるので注意が必要ですね。例えばGoogleWaveとか。あれにはずいぶん期待したんですが、すぐに無くなってしまいました。GoogleWebDesignerはどうなるのでしょうか?とりあえず、なにかパーツを作ってCSSで出力してみようと思っています!!

独学でできるだけ速く安くWebデザインの技術を身につける方法

Dreamweaver いきなりコーディング

まずはDreamweaverの本を買います。Webサイトを実際に作る形式の本を買います。本に沿って実際にWebサイトを作ります。

私が買った本

関口和馬著『Dreamweaver レッスンブックCC対応』ソシム株式会社2013年8月。

Dreamweaverレッスンブック CC対応

HTML5とCSS3 コーディングの知識を深める

つぎに、HTML5、CSS3の本を買います。HTML5とCSS3の事が1冊の中に書かれているものが良いと思います。これもWebサイトを実際に作る形式の本を買います。本に沿って2つ目のWebサイトを作ります。

私が買った本

エビスコム著 『HTML5&CSS3レッスンブック』 ソシム株式会社 2013年6月。

HTML5&CSS3レッスンブック

レンタルサーバー WebサイトのUP

ロリポップなどのリーズナブルなレンタルサーバを借ります。F2Cは無料です。F2Cの無料のものの場合、公開したページの下部に「Powered by F2C」というリンクが小さく挿入されます。また、「http://〜.web.fc2.com」というURLがトップページのURLとなります。〜の部分は自分で指定できます。

Index.htmlのことを調べて理解しておきます。レンタルサーバーによっては第1ディレクトリにindex.htmlがないとアップしたWebサイトが表示されない事があります。演習で作った2つのWebサイトをアップします。

オリジナルのWebサイトを作る

ここまでくれば簡単なものであればオリジナルのWebサイト作ることができます。なので、いきなりWebサイトを作ります。ワイヤーフレームを考えます。2段組か3段組のどちらかで作るのが良いと思います。スタンダードですし、わかりやすいですし、使い回しができます。

PhotoshopIllustrator Webサイトのパーツ作り

PhotoshopIllustratorの操作についての本を買います。1冊やります。操作を覚えただけではWebサイトのパーツを作れません。 なので、PhotoshopIllustratorのロゴデザインの本を買います。Webサイトのパーツを作ります。自分でパーツを作らないなら、素材の本を買います。その際は、ロイヤリティに注意します。Webサイトのパーツは、PhotoshopでもIllustratorでも作れます。それぞれ得意分野はありますが、似たようなものを作れます。しかし、写真のレタッチのことを考えるとPhotoshopを使えるようになった方がいいと思います。余裕があればIllustratorもという感じです。Webサイトのパーツは素材がありますが、写真のレタッチは自分でやらないといけないので。Webサイトで写真はとても重要なものですから。 また、FireworksでもWebサイトのパーツを作れますが、FireworksはAdobeがもう開発しないと発表していますので、やはり個人的にはPhotoshopをおすすめします。

私が買った本

広田正康著『Photoshopトレーニングブック』ソーテック社2013年2月。

Photoshopトレーニングブック CS6/CS5/CS4対応

広田正康著『Illustratorトレーニングブック』ソーテック社2012年7月。

Illustrator トレーニングブック CS6/CS5/CS4対応

Photoshopプロフェッショナルズ アイコン・マーク・ロゴデザイン』

Photoshopプロフェッショナルズ アイコン・マーク・ロゴデザイン

Illustratorプロフェッショナルロゴデザイン』

Illustratorプロフェッショナルロゴデザイン改訂新版 CS5/CS4/CS3完全対応

GoogleウェブマスターとGoogleアナリスティック SEOをかじってみる

Googleウェブマスター、Googleアナリスティックに登録します。トラッキングコードを作成してWebサイトに貼り付けます。2週間位はロボットが来ませんがへこたれてはいけません。

SEOの事はネットにたくさん情報が出ていますので調べます。書籍よりもネットの方が最新の情報が手に入るので良いと思います。はじめはHTMLのタグの使い方とかを研究すると良いと思います。

他のアプリケーションやスクールについての考察

Museやホームページ・ビルダーなら、Dreamweverで作るよりも、簡単にWebサイトを作ることができます。しかし、SEOを考えると、今のところコードを避けて通ることはできません。簡単に手早くWebサイトを作りたいだけならMuseやホームページ・ビルダーで、できるだけ多くの人に見てもらえるサイトを作りたいのならDreamweaverで作った方が良いと思います。テキストエディタでも作れますが初心者にはかなりハードルが高いのでやめた方が良いと思います。

スクールでは、DVDを見て本の通りに演習します。もしくは、先生が近くにいて本のとおりに演習します。その時はできるんです。しかし、一人になった時、何をやっていいのかわからないくなるのです。スクールの授業料は50万円以上もするところが多いです。それにAdobeのソフトを買わされて、テキストを買わされて、半年以上も通って。実際には、スクールでやることはここに書いたことと同じ内容です。DVDの内容は操作の解説です。YouTubeには似たようなものがたくさんあります。またAdobeTVを見ても操作方法を学べます。 PhotoshopIllustratorは座学では身につきません。実際に手を動かして作業する必要があると思います。

まとめ

いずれにしても、何ヶ月も練習ばかりするのではなくて、いきなり作ってしまうのが一番速いと思っています。参考になれば幸いです。また、関西にお住まいの方でしたら、一緒に勉強したいなとも思っています。