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サイトの設計について何を考えているかについて書いてきました。
全てではないですが、基本的なことは拾えたのではないかと思います。

ここまで考えたことは、要件定義、サイトマップ、ワイヤーフレームをもとにして考えています。これの他、コーダーの仕事としては、デザインカンプに従ってデザインデータを切り出し、HTMLやCSS、JSを書く仕事があります。つまり、その仕事に入る前に、これだけのことを考えて準備して実装に手を動かしている、ということになります。それを考えると、WPサイトの見積もりは30万円〜という見積もりも、決して高いと言えないと思うのです。

デザインを当てていく作業の前に、もう少し補足しておきたいことについて簡単に書いておきます。

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

[ssba]

WPサイトの設計について(カスタムフィールド編)

WPサイトを設計するときに何を考えているか、の連載、なんと5回目です。長いですね。前回はテンプレートの話をしました。今回はカスタムフィールドの話です。

またでましたね、カスタム。投稿タイプだったり、タクソノミーだったり、今度は「フィールド」のカスタムです、つまり、独自のフィールドを追加するということです。ところで、フィールドって、なんでしょうね?

続きを読む WPサイトの設計について(カスタムフィールド編)

[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]

さくらインターネットのレンタルサーバーで無料のSSLが簡単に設定できるようになったのでこのサイトを暗号化しました

黒い画面(CLI)とかサーバーに全く詳しくなく、SSL/TSLの技術についてもさっぱり理解できていない管理人です。なので、サポートがないと自分のサイトの暗号化もできず…予算もないし、時代遅れのままなのね、と諦めておりましたが、そこへ光明が。

…大げさでしたね、すみません。

さくらインターネットのレンタルサーバーで無料のSSLが簡単に設定できるようになったのでこのサイトを暗号化しました。
少し前にC-Labo.公式サイトはラピッドSSLを導入しましたが、シマンテックの一件でこれもちょっとよくないぞ、となっていたところへありがたい話でした。
無料のSSL証明書には「Let’s Encrypt」というのを利用しているそうです。

プレスリリースはこちらから。
https://www.sakura.ad.jp/news/sakurainfo/newsentry.php?id=1770

公式のサイトもあるようです。
https://www.sakura.ne.jp/function/freessl.html

気になる導入方法

コントロールパネルから、ほぼワンクリックで導入が可能です✨

https://help.sakura.ad.jp/hc/ja/articles/115000136822

無料では信頼性が低いのでは?

無料で取得できる認証は「ドメイン認証」です。
無料も有料も、暗号化自体の安全性に違いはないという理解です。

でもなんで、あんなにお高い証明書があるのに、無料でできてしまうのか。ちょっと納得がいかなかったのですが、技術的に頑張って自動化したので無料でも良い、というのがひとつ理由にあるそうです。

参考にしたサイト
https://letsencrypt.jp

あと、正しいのかどうかはわからないですが、「とにかく平文通信しているサイトを一掃したい」という、大手のみなさんの思惑があるのでは、という意見。
https://techracho.bpsinc.jp/hachi8833/2016_09_23/26188

でも無料のSSL証明書は本当に問題がないのか?について、実際にフィッシングサイトなどが無料のSSLを使っているのではないか、というケースもあるようで。
証明書を確認すれば、どこの認証局の証明書を使っているのかはわかるので、いちいち確認すれば、フィッシングサイトであることも見抜けるのだと思いますが、ちょっとやですね。
https://rms-digicert.ne.jp/digital-certificate-news/certificates-for-phishing

今後に思うこと

単に暗号通信のためであれば無料でもまあ良いとしても、本当のところの「信頼性」を得るためには、有料の証明書を使うのが真っ当なのは変わりないのかなあ、と思いました。
また、こうなってくると「ドメイン認証」レベルの証明書の信頼性って、だいぶ低く見積もられるようになるのかなあ、とも思いました。
長い目で見ると、「企業認証」を取得し、証明書をひらけば事業主体が確認できる、というのがますます必要になるのでは・・・?
または「グリーンバーじゃなきゃ安心できない!」っていう風になっていくのかも・・・?
もしくはもっと確かな方法が求められていくようになるのかも・・・?(攻撃者と防御者のいたちごっこ…それこそ「安全」の宿命?)

[ssba]

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

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

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

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

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

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

[ssba]