カテゴリー: ウェブ制作

私の現在の実力

できること

後々、自分のサイト制作の実力を確認しておくために、現時点での私のサイト制作の実力を書いておきます。

現在の私ができることは、基本的なホームページを作成することです。

そして基本的なホームページを作成し、それをWordPress化することができます。
つまり簡単な物でよければ、WordPressのテーマを一から自作することができます。

また、jQueryを使って簡単な動きのあるサイトを作ることもできます。
例えばスライドアップやスライドダウン、トップへ戻るボタンをクリックするとスクロールしながらサイト上部に戻る動きをつけることができます。

できないこと

できないことも書いておきます。

私ができないことはデザインですね。
デザインのセンスが良くないです。

努力すればなんとか見栄えのいいサイトが作れるのかもしれませんが、これを改善するのはなかなか大変そうです。

デザインだけは市販のテンプレートを使うか、あるいはデザイナーを雇ったほうがいいかも？　と考えています。

私の勉強方法

私の勉強方法についても書いておきます。

私の勉強方法は、基本的には市販の本を買ってきて、コードを自分で打ってみるというものです。

本だけでは分からないところはネット検索しました。
その他には、ネットでProgate（プロゲート）を受講しました。

私が勉強に使ってきた本のうち、参考になったと思ったものを書いておきます。

HTML・CSSで参考にした本

• 「HTML5&CSS3レッスンブック」　エビスコム
• 「HTML5&CSS3デザインブック」　エビスコム

エビスコムさんの本には大変お世話になっています。
エビスコムさんの本は質が安定しているし、初心者向けの本から上級者向けの本まであるので勉強しやすいです。

なお、ここに挙げた本はfloatを使ってサイト制作をするという伝統的な制作方法を解説したものです。

現在であれば、同じエビスコムさんの著作で

「フレキシブルボックスで作るHTML5&CSS3 レッスンブック」や「CSSグリッドで作るHTML5&CSS3 レッスンブック」

があるので、こちらを読むといいでしょう。

• 「ホームページ作成のツボとコツがゼッタイにわかる本」　中田亨

中田さんの本もいいですね。

初心者向けの本は通常、トップページならトップページ、会社案内なら会社案内、お問い合わせページならお問い合わせページというように、個々のページごとにサイトを制作していくものが主流です。

しかしこの本では、最初に各ページの共通部分を作成し、その後、ページごとに足りない部分を作成していくという方式をとっています。
実際のサイト制作に近いやり方をしている点に特徴があります。

PHPで参考にした本

• 「独習PHP 第3版」　山田祥寛

PHPについては「独習PHP 第3版」を使いました。

PHPの文法・構文が基礎から丁寧に解説されていることと、サンプルコードが短い点が気に入っています。
ただし、PHPが全くの初心者の場合はもう少し簡単な本を選んだほうがいいかもしれません。

• 「いきなりはじめるPHP ワクワク・ドキドキの入門教室」　谷藤賢一

初心者向けの本です。
この本は、単にPHPの文法を学ぶのではなく、PHPを使って実際のシステムを作成することを目的としています。

プログラミングを勉強しても、実際のシステムをつくれないという悩みを抱えている人は多いと思います。
そのような人はこの本で実際のシステムづくりの一端を味わってみるのもいいかもしれませんね。

この本については感想は書いています。詳しくはこちら。
『いきなりはじめるPHP　ワクワク・ドキドキの入門教室』の感想

WordPressで参考にした本

WordPressの本は2種類あります。

1つはWordPressのコードを書いて、ホームページを自作したい人向けの本です（制作者向けの本）。
そしてもう1つは、ホームページの自作まではしないが、WordPressの使い方や運用方法を知りたい人向けの本です（運用者向けの本）。

同じWordPress本といっても、制作者向けの本と運用者向けの本とではレベルが全く違います。
当然、制作者向けの本のほうがレベルが高いわけです。今回、私が紹介する本はもちろん制作者向けの本です。

• 「WordPressレッスンブック」　エビスコム
• 「WordPressデザインブック」　エビスコム

WordPressについてもエビスコムさんにはお世話になりました。
これらの本では、WordPressの基本コードが書かれており参考になります。

• 「WordPressのツボとコツがゼッタイにわかる本」　中田亨

中田さんのWordPress本は、WordPressの構造に触れながらサイトを制作する本です。

非常にいい本なのですが、最初にこの本を読むことはお勧めしません。
事前にエビスコムさんなど、他のWordPress制作本を読んだ後に読むことをお勧めします。

中田さんの本についての感想はこちら。
『WordPressのツボとコツがゼッタイにわかる本』の感想

JavaScript・jQueryで参考にした本

• 「いちばんやさしいJavaScriptの教本」　岩田宇史

正直に言うと、JavaScriptについては特に思い入れはありません。どうせjQueryを使えばいいと考えているので。

ですから今回紹介した 「いちばんやさしいJavaScriptの教本」 も書店で「なんとなく読みやすそう」という理由だけで選んだ本です。

• 「Web制作の現場で使う jQueryデザイン入門」　西畑一馬

「Web制作の現場で使う jQueryデザイン入門」は非常にもったいない本です。

内容は大変良いと思います。
jQueryの構文や使い方が体系的にまとめられており、私好みの本です。

しかし現時点（2019年5月20日）では、どうやら読者特典であるサンプルファイルがダウンロードできないようです。
以前はサンプルファイルがダウンロードできていたんですけどね。

初心者にとってサンプルファイルが使えるかどうかは大きな違いです。
サンプルファイルが再びダウンロードできるようになれば、自信をもっておすすめできる本なのですが、現時点ではこの本を積極的におすすめできないのが残念です。

スマホサイトを作ってみた

パソコン用ホームページ制作の練習をしてきたのですが、そろそろスマホ・携帯用のサイトも作ってみたくなりました。

ホームページを作るとき、最近はモバイルファーストといってスマホ・携帯サイトを作ったあとでパソコン用ホームページを作るのが主流になりつつあります。

ですが私はいままでパソコン用ホームページをメインで作成してきたため、今回も最初にパソコンサイトを作り、それをスマホ・携帯サイトに作り替えるという手順を取ることにしました（私はこれをパソコンファーストと呼んでいます）。

パソコンファーストでホームページを作ってみた結果ですが、私は「二度とパソコンファーストではホームページは作らない」と心に強く刻みました。

なぜ私がそう思うようになったのか、以下にその理由を書いてみたいと思います。

パソコンファーストで苦労した点

デザインに制約がある

パソコンファーストで苦労した点は大きく2つあります。

1つはデザインに関する点です。

ホームページ制作というのは、例えるなら倉庫に荷物を詰め込む作業のようなものです。

モバイルファーストは小さな倉庫にある荷物を大きな倉庫に詰め替える作業、パソコンファーストは大きな倉庫にある荷物を小さな倉庫に詰め替える作業といえます。

小さな倉庫から大きな倉庫に詰め替える場合、荷物の詰め替えは比較的容易です。
ところが大きな倉庫にある荷物を小さな倉庫に詰め替えようとすると、いろいろと工夫しないと倉庫に入りきりません。

パソコンファーストでホームページを作ると、それを小さくするために行を折り返したり、構成物を非表示にしたりと、様々な工夫をしなければならないのです。

もちろんモバイルファーストで作る場合も小さな画面は手間はかかるのですが、パソコンファーストのようにいったん大きな画面で作り、それを小さくするほうがはるかに手間がかかります。

CSSの構成に悩む

モバイルファーストのCSS構成

もう1つ悩んだのはCSSの記述構成です。

私はメディアクエリでホームページを作っているのですが、モバイルファーストの場合は、最初に1番小さな画面のデザインを記述し、その下に順次、大きな画面のデザインを記述していくことになります。

例えば小画面（400px）、中画面（800px）、大画面（1200px）のサイトを作る場合、モバイルファーストであれば

1. 小画面（400px）
2. 中画面（800px）
3. 大画面（1200px）

の順に記述すればいいですよね。
これはCSSの記述として統制がとれてきれいです。

仮にこのサイトに大々画面（1600px）を追加する場合も、

1. 小画面（400px）
2. 中画面（800px）
3. 大画面（1200px）
4. 大々画面（1600px）

の順に記述すればいいだけですね。

パソコンファーストのCSS構成

ではパソコンファーストでホームページを作る場合、どの順で記述するのがよいのでしょうか？

パソコンファーストだから最初に大画面（1200px）を記述しますよね。すると構成は

1. 大画面（1200px）
2. 中画面（800px）
3. 小画面（400px）

となるのでしょうか？

ではこのサイトに大々画面（1600px）を追加したい場合はどうすればいいのでしょうか？

1. 大画面（1200px）
2. 中画面（800px）
3. 小画面（400px）
4. 大々画面（1600px）

と記述するのでしょうか？　それとも

1. 大々画面（6500px）
2. 大画面（1200px）
3. 中画面（800px）
4. 小画面（400px）

とするのでしょうか？

CSSの記述ルールを決めておかないと、CSSがどんどん見づらくなりますね。

またきちんとCSSの記述場所を考えないと、記述場所によっては優先順位（下に書くほど優先適用される）のためにセレクタが複雑になりすぎるという問題も生じます。

つまり、きれいなCSSをつくるという観点からもモバイルファーストでホームページを作るほうが理にかなっているのです。

今回、パソコンファーストでホームページを作ったことにより苦労はしましたが、それによりモバイルファーストの意義がよく理解できたことが大きな収穫でした。

初の全ページ模写

『おしゃれなWebサイトテンプレート集』(山口有由希、坂本可南子、梶嶋えりか / 技術評論社)に掲載されているDental Clinic（Template_08）を模写しました。

模写したサイトはこちらです（別窓が開きます）。


https://cheshire-cat.info/portfolio/2018/dental-clinic/

以前に模写したサイトでは、トップページのみの模写だったのですが、今回は全ページ模写しました。

もともと全ページを模写するつもりはなく、トップページだけを模写する予定だったのですが、予想外に早く模写ができたので、「ついでに全ページ模写しよう」と思って全てのページを模写しました。

全ページとは言っても、Dental Clinicはヘッダー、フッター、サイドバー、本文の4か所からなっており、ヘッダー、フッター、サイドバーは全ページ共通です。

そのため本文のみを追加すればいいことになります。

とは言うものの、４ページ分の本文を追加するのは、それはそれで手間ですが。
次回以降は大まかなデザインさえ模写できれば、細かな幅の調整などはしなくてもいいと思います。

他のページの構成にも気を配りながらHTMLを記述していくのですが、「どうすれば簡単に手早く、他のページとの齟齬がなく作成できるか？」を考えながら作成するのは楽しかったです。

苦労した点

最初から全ページを模写するつもりであれば、それに対応した形でHTMLを記述したことでしょう。
しかし今回は、トップページ作成後に全ページを模写することに決めました。

そのためトップページ（の本文）は全ページ模写を想定したHTML構成になっていません。
つまりHTMLの記述が後付けでチグハグしたものになってしまいました。

最初から全ページ模写すると決めていれば、もっとスマートなHTMLが記述できたでしょう。その点が残念です。

それと今回のサイトでは、ヘッダーのナビゲーション作成が難しかったです。
オリジナルサイトはもっと手の込んだデザインだったのですが、今の私には複雑すぎて手が付けられませんでした。

このためヘッダーナビゲーションは途中で妥協して作成しています。この点が悔しいですね。

5つの課題

ホームページ制作をやりたいのですが、私には現時点で5つの課題があります。
課題というより不安と言ったほうが正確かもしれませんが…。

今回はその5つの課題を記載したいと思います。
まずは第5位から。

第5位 WordPressの組み込み不足

第5位はWordPressの組み込みです。

私はホームページ制作を基本的にはWordPressで行いたいと考えています。
静的サイトでもいいのですが、やはりブログとしての機能を活かしたいためです。

WordPressを使うためには静的サイトにWordPressを組み込まなければなりませんが、現時点で私ができることは少ないです。
コードを覚えていないためです。

ですが逆にいうと、コードさえ覚えておけばWordPressの組み込みはできるわけです。

そのため少しづつ勉強していけばこの課題は解決されるので、そこまでの不安は感じていません。

第4位　レスポンス対応ができない

私の作成するホームページですが、現在のところレスポンス対応ができていません。
レスポンス対応は特に難しいことはないのですが、他にもいろいろ覚えなければならなことがあるので、後回しにしています。

きちんとレスポンス対応させるのは最終段階に入ってからになるでしょう。

第3位　JavaScript・jQueryが実装できない

できればホームページにはJavaScript・jQueryを実装させたいです。

ですが私がJavaScript・jQueryを勉強したのは1年以上前ですし、そこまで本腰を入れた勉強ではなかったので、いざホームページにJavaScript・jQueryを組み込もうとすると、覚え直すことが多そうです。面倒だなぁという気がしています。

まぁ、いよいよとなればJavaScript・jQueryを使わずにホームページを制作してもいいので、この件はそれほど気にする必要もない…かな？

第2位　画像ソフト・イラストソフトの使い方が分からない

フォトショップとかイラストレーターなどの画像ソフト・イラストソフトの使い方が分かりません。

いや、確かにちょっとだけ勉強しましたよ。
でも分からないんですよね、これが。わざと難しい操作方法にしてるんですかね？

もっと簡単に使えるソフトはないか？　と思い、Canvaを使ってみたんですが、これはまあまあ使い勝手は良かったです。
ただ、仕事として使うのであればCanvaも有料版を使わないといけないかな？　という気もします。

第1位　デザインに自信がない

最大の難関がこれ。
とにかくデザイン、デザイン、デザインですよ。

デザインに自信がないんですよね。

なんだろう？　私の作るホームページのダサさは？
自分でサイトを作っていてイラッとします。

現在、デザイン力を高めるために気に入ったサイトの模写をしています。
ホームページ制作に限らずデザイン全般に言えることだと思うのですが、デザインにはある程度の型というか、基本的なデザインパターンがありますよね。

私はその型を全く覚えてないのです。基礎がまるでなっていないです。
だから模写を通じてある程度の基本的なデザインパターンを勉強したいな、と考えています。

課題を挙げてはみたものの…

さて、とりあえず現時点で私が悩んでいる課題を5つ書いてみました。
でも私が挙げた課題って本当にホームページ制作に必要な課題なんでしょうかね？

重要ではない課題をさも重要な課題だと思っている可能性が高いです。

そうすると私が将来ホームページ制作をしたとして、その時に今回の記事を振り返ったら何と思うんでしょうか？
「ずいぶんつまらないことで悩んでるな（笑）」

きっとそんなふうに思うんでしょうね。