WPサイトデザインのコツ(はじめに)

また、連載を始めます。今度は、デザインの話。

私ごとですが、こないだツイッターを見ていたら、「CSS書ける人:Webデザイナー」という分類がされていて、捨てたはずの「デザイナ」という肩書きがまた自分に舞い戻ってきて苦笑しました。ウェブサイトの最終工程である「コーディング」をメインの仕事にしようと思った時に、デザインからは距離を置こうと決めたんです。なかなか離れられないのもほぼ業だなと(笑)。

ここでいうところの「Webデザイン」は直接CSSを書くことがなくても、むしろコーディングとか全然わからないけど、ウェブサイトの見た目を作ることがある、ウェブサイトのデザインをやってみたい、という方に向けて書きます。WPサイトデザイン、と題していますが、もちろんそれに限らず使える話なので、自分の作るWebデザインをもうちょっといいものにしていくにはどうしたらいいか?と思う方は是非読んでいただければと思います。
WPサイトの、どちらかというと設計について知りたいという方は、ちょっと前に書きましたので、そちらを参考にしてください。

Webサイト制作における「デザイン」の立ち位置

広義のデザインは、Webサイトの制作全ての段階で出てくるのですが、今回はとにかく見た目のデザインというところで、この「デザイン」という言葉を使います。

  

Webサイトには明確な目的があり、それを叶えるために、機能を検討し、その機能が正しくユーザーに認知されるように「見た目として表現する」のがWebサイトにおける「デザイン」の役割です。Webサイトは基本的に「文書」なので、それを見る人にとって情報が伝わりやすく、魅力的に見せることも、「デザイン」の役割です。機能の役割を示す「ビジュアル」であり、伝える情報を表現する「グラフィック」の両方を備えています。

サイトの目的と
デザインする個別のページが持つ役割を
正しく理解していなければいけない

Webサイトの制作における「デザイン」の役割を考えると、少なくともサイトを作る目的を理解し、可能ならビジネスモデルや収益モデル、ユーザーがどのように行動するのが理想的なのかを理解して、それをWFに見られる文書をもとにページの役割を理解してデザインに臨む必要はあろうかと。かといって、ディレクタが丁寧にその辺りの事情を説明しているのかは、わからないのですが。
デザイナ自身がコードを書かない場合、制作の過程でいうとデザイナの下流にいるのがコーダーです。私です。
私の元には、デザイナさんが描いたデザインカンプが元データとして渡されます。その時に、「どの辺がリンクとして機能するのか」「これはどこをどう操作するのか?」「このページを見た時に、ユーザーに促される行動は何か?」さっと理解できなくて首をひねってしまうことがあります。そういうデザインのサイトをそのままの見た目で作ってサイトに仕上げて公開したら、ユーザーも同じように首をひねってしまうかもしれませんね。

完成したら終わり。ではない!
Webサイトの「なんとか」サイクル

Webサイトは作って終わりではなく、成果を確かめながら、変化し続けるユーザーのニーズに対して改善し続けて行くことが「できる」媒体です。紙の本は一度出版され、読者の手に渡ったものを変更することはできません。読者が「この本は知りたい情報をすっかり得てしまった」と思って手放そうとする時(ニーズが変化した時)に「待って!また新しい情報載せるから!」ということはできません。でも、Webサイトならできます。なので、Webサイトは繰り返し改善します、すべきなのです。ここで出てくるのが、そうです、よく聞く「なんとか」サイクルです。

なんていうんだったか忘れて出てこなかったので、某大手検索サイトで検索したら、教えてくれました。あほな質問に、なんという親切な対応!神ってる!!
PDCAサイクルについては、よく聞くものだともうのでここでは特に取り上げません。実際のWebサイト制作のフローでどのようなタスクとして出てくるのかについて知りたい場合は、『ノンデザイナーでもわかる UX+理論で作るWebデザイン』のP17〜19あたりを参照ください。UXデザインサイクルについても読むといいと思います。

まとめ

Webサイトの制作においてデザイナさんに求められる役割がわかっていただけたかと思います。でも、これって、印刷物の制作とかと、そう大きく変わるでしょうか?目的を理解して伝えるべき情報を揃えて整理し、わかりやすく配置し、魅力的に見せる、そのことは同じだと思います。
違うといえば、見た目を作った後に、コーダーがそれを解釈してHTMLとCSSに起こすため、自分の思うようにならないことがあるのは確かですが。また、Webサイトには動きや機能があるので、その部分は「わからない、難しい」と感じるかもしれないですね。
本来ディレクタと話し合ったり、もっとコーダーとも相談して進めるのがいいと思っています。相互理解、大事です!

[ssba]

WPサイトの設計について(テンプレート編)

WPサイトを作る時にどう設計するか?何を考えているか?についての連載4回目です。はじめにサイトマップをよく見て投稿タイプについて考えURLについて考えてきて、今度は各ページを出力するテンプレートについてのお話です。長い連載になってきました。でもこれを含め残り2、3回ぐらいだと思います。どうぞよろしければお付き合いください。

テンプレートってなんのこと?

WPでは、投稿タイプごとに、管理画面で記事内容を入力できます。入力した内容をデザインに合わせて「出力」することでサイトが見られる、ということになります。見えるサイトのことを「フロントエンド」と呼んだりします。WP管理画面を「入力装置」とし、実際にサイトとしてユーザーが見る「フロントエンド」の間にあるのが「テーマ(テンプレート)」です。テンプレートが入力された内容を「出力」しない限り、管理画面で何を入力してもサイトは真っ白なままです。

テーマテンプレートを作る方法自体は、ここでは紹介しません。ググりましょう。個人的には、WP標準の「twentyなんとか」というテーマをもとにして、不要な部分はざくざく消すなどして、カスタマイズしています。この記事では、これまで考えてきた設計をもとにした場合、どんな「テンプレート」があればサイトを組んでいけそうか?ということを考えていこうという趣旨で書いてます。

なんじゃそれ、と思った方は是非続きをどうぞ。

続きを読む WPサイトの設計について(テンプレート編)

[ssba]

WPサイトの設計について(URL編)

WordPress でウェブサイトを作るときに最初に何を考えているかについてまとめた連載の3回目でございます。前回はWPの投稿タイプなどの特徴を知って、サイト内のページを適切な投稿タイプに割り振る話をしました。今回は、URLがどうなるか、というお話。

わがままなURLにはできない宿命?

WordPress ではURLがページを「クエリ」になるため、色々とルールが存在し、それに従ってURLが決定されます。なので、ディレクタやクライアントが思う通りのURLにできないことがあります。
できるできないでケンカになる前にしれっと「こういうURLになりますので」とお知らせした方が波風立たない場合もあるので、サイトマップをもらった段階ぐらいで一度お知らせしておくのが無難だと思っています。(ただしWPの仕組みに詳しかったりPHPについてとても詳しかったりする人は、この辺の問題を華麗に解決できるんだと思います。私はできないので、WPのルールに従って無理のないURLにします。その方が何かと安全そうだし。。。)

そもそもどういうURLになるのかについて、知っておくのがいいでしょう、と思ったので、下記に例をあげます。

続きを読む WPサイトの設計について(URL編)

[ssba]

WPサイトの設計について(投稿タイプ編)

WordPress でウェブサイトを作るときに、サイトマップとワイヤーフレームをもらってからコーダーが何を考えるか?ということをまとめてみようとはじめた連載の2回目でございます。

「WPサイトの設計」について、ディレクタさんやWPを使いはじめたばかりの方へ参考になれば幸いです。コーダーの頭の中、のぞいてみる気分で読んでいただければと。

最初の記事はこちらです。

サイトマップの確認ができて、さて、サイト内の各ページをWPでどの投稿タイプに当てはめるか?ということを考えていきます。

続きを読む WPサイトの設計について(投稿タイプ編)

[ssba]

WPサイトの設計について(はじめに)

WordPress のサイトを作るとき、サイトマップやワイヤーフレームを見ながら、何をどう機能に充てていこうか考える作業をします。
それを「WPサイトの設計」と呼んでいます。

WPサイトを設計するときに考えていることをまとめました

この記事はこのページを含め、6つの記事で構成されています。

  1. はじめに(この記事です)
  2. 投稿タイプ編 サイトマップにあるページをどの投稿タイプに当てはめるか?判断のコツを解説しています
  3. URL編 WPでサイトを作る時、各ページのURLがどのように決定されているか解説しています
  4. テンプレート編 サイトを作る時にどんなテンプレートファイルが必要になるか解説しています
  5. カスタムフィールド編  フィールドってそもそも何というところから、設計のコツを書いています
  6. まとめ編 いつも使っているプラグインのことや、管理画面、マニュアルとレクチャーなどについて思うことを書いてあります

あくまで、とあるコーダーの個人の思想です

WPで作ることが前提なら、サイトマップやワイヤーフレームの段階で、その辺りのことを決めてくれているディレクタさんもいるのかもしれませんが、あまりそういうことはないので、お引き受けするとき、見積もりをお出しする際にそれらの資料を元に設計を考えて、費用を算出します。

WPサイトの設計をするときに何を考えているか、以下にあげて見たいと思います。コーダーの頭の中を少し分かってもらえたら嬉しいです。

続きを読む WPサイトの設計について(はじめに)

[ssba]

続報3:終わらないいたちごっこ・・・

不名誉な連載も4回目ともなると楽しく・・・・なりません!

結局、怪しい奴を見つけてはブラックリストに載せて・・・とやっていたのですが、さすがにいたちごっこにも飽きてきて、どうにかなんとかする方法はないものか、知人に聞いてみたら提案されたのが以下のサイト。

日本国外からのアクセスを制限する.htaccess

妙なログインやら存在しないページへのアクセスを繰り返してくるようなのはだいたいが海外IPからなので、それならとりあえず全部拒否しちゃって、国内IPだけホワイトリストに書いて許可しちゃえばいいじゃない、という選択肢。

C-Labo.は海外からのお客様を期待しているサイトではないので、とりあえず、一旦これで様子を見てみることにしました。

あ、ちなみに、このサイトにも「存在しないページへのアクセス」が見受けられるようで…..orz

wordpressサイトを使うってこういうことなんだなあ・・・・、と、神妙な気持ちになりましたとさ。

また何か動きがあったらお知らせいたします。

関連記事はこちらです。

うちのサイトに不正ログインしようとした人誰ですか???
続報:不正ログインが止まらない?
続報2:妙なアクセスが続いている件

[ssba]

続報2:妙なアクセスが続いている件

自分のサイトに身に覚えのないログイン失敗のログが大量にあった・・・・!
という事件から始まり、IP制限をかけてみたり、ログインページにBacis認証をかけたり、という対策をしたりして経過を見守ってきました。

そんな中、今度は、妙なアクセスの記録があったので、続報です。

きっかけは、すでにお馴染みになってきた「WP Security Audit Log」プラグインのログ。下記のような記述があった。

001

青い文字で、モザイクがかかってるのはIPアドレスです。1行目のエラーコメント、これは、「存在しないページに続けて10回以上アクセス(同一のIPアドレスからのアクセス)してるやつがいるから、今後注意しててね」的なことが書いてある。

002

3行目、こちらは存在しないページに10回アクセスされたログがある、ということ。
1、2件は、普通にアクセスしていても。どうもよく起きる(※)のは確認しているものの、10件とかはちょっと変。
(※Safariがアイコン画像を探してアクセスするらしい。)

前回の対策時に、記事には書かなかったのだけど「リディレクション」というプラグインを入れておきました。本来301リダイレクトを管理するためのツールですが、404エラーのログを取ることができるので入れておいてみたものです。(リニューアル前のページにアクセスがあることがわかったので、リダイレクトしようかと考えたため。.htaccessに書いてもいいのだけど、お客様のところへ入れてみようかと検討したプラグインだったので、試しに使う目的だった。)

で、404エラーのログを見ると、おかしなことをしている奴が確かにいる。

003

下から3行は、ログインページを探すような動きが見られる。

004

プラグインのファイルを探すかのような動きが見られる。

(遠くで悲鳴)

とりあえず、怪しいと思われるIPアドレスをブラックリストに載せました。7件ぐらい。
多分、こんなのいたちごっこになっちゃうんだろうけど。

これで改善が見込めると良いのですが。
また動きがあったらお伝えします。

関連記事はこちらです。

うちのサイトに不正ログインしようとした人誰ですか???
続報:不正ログインが止まらない?

[ssba]