CATEGORY : NEWS

Webサイトをデザインするとは、どう言うことだろう？もう一度、初心に戻って考えてみたいと思う。

Webサイトのデザインとは

Webサイトのデザインとは、ゴール（目的）に向かってユーザーに適切な情報や体験を得てもらうよう設計することだと考えている。

デザインというと見た目を整えることだと考えるひとが多いと思う。論文での定義は”デザインとは、特定の環境下かつ様々な制約の中で、目的を達成するために、未完成の要素を組み合わせて、要求を満たすような仕様を明示すること。”もしくわ”デザインは、ユニークな期待に答えるためのロードマップまたは戦略的アプローチです。その目的を達成するために、法的、政治的、社会的、環境的な安全/経済制約の中で何をどのようにするべきか、また、仕様や計画、パラメーター、コスト、活動、プロセスを定義します。”の二つが提唱されいる。デザインの厳密な定義は、個々人のとらえ方次第で良いのだと思うが、言葉よりも、何がユーザーのためになる（適切なUI・UX）のかを考え抜くことが大切なのではないだろうか。

Webサイトは、見た目だけデザインすれば良いというものではない。どのような目的があり、何が伝えたいのか、何を体験して欲しいのかを考え、ゴールするのにもっとも適切な方法を実装することが大事なのである。

ゴールに導く適切なUI・UX

まずUXを考える上で大切なことはWebサイトに来て欲しい顧客（ペルソナ）にサイトでどんな行動をしてほしいのか、サイトを見た結果どうしてほしいのかを目的を明確にしましょう。

顧客視点で UI・ UXの最適化に努め、 ユーザーの体験をいかに良いものにできるかを考えていくことが大切です。WebにおけるUIとは、ナビゲーションやボタン、フォームなど、サイトを使う上で必要なパーツのことを指します。UXは、そのパーツの使い勝手や欲しい情報へのアクセス性などによって抱く感情のことを指します。なんだかユーなちゅあらが二つあってややこしいですがUX（ユーザーが体験すること）の方が重要です。

上記のことが、まさにWebサイトをデザインすると言うことではないでしょうか。

Webサイトの制作は、見た目のビジュアルデザインの他にさまざまな作業を経て完成します。今回は、松本市にある弊社でひとつWebサイトがどうのようにして完成されるのかご紹介いたします、

制作依頼とオリエンテーション

クライアントからお問い合わせ・ご相談を受ける。まず、オリエンテーションとヒアリングを行います。それによって「何のためにWebサイト」を制作するのかを明確化することでゴールを決める。

要件定義

オリエンテーションとヒアリングからクライアントの課題や悩みを整理し、そしてゴール出来るように具体的に要件を定義する。もし、ゴール（目的）がブレる場合や難しい場合は追加でヒアリングを行い実現可能な要件になるまで何度も精査することが大事となる。

企画立案

整理された要件（ゴールや目的）を解決する企画をまとめる。要件によってワイヤーフレームやカンプデザインだけではなく、どうやってゴールを目指すのかと言ったロジックが明確にわかるようなドキュメントにする場合もある。

プレゼンテーション

クライアントに立案した企画内容をプレゼンテーションする。ここで注意が必要なは、クライアントはパッと見のビジュアルデザインに目が行きがちだが（見た目も勿論大事です）一番大事なは上記で決めたゴール（目的）をどうやって達成するかと言うことを共有することである。

承認・発注・仕様策定

プレゼンした企画に対してクライアントの承認を経て発注となる。承認をいただいた企画に対して、実制作に向けたより具体的な仕様を策定する。策定した仕様をクライアントに随時確認をとり間違った方向に行かないようコミニケーションを欠かさないようにする。

設計と制作

策定した仕様に基づき、具体的なモックアップを作る。WordpressなどCMSを導入するのか？、個別ページのデザインワークやテンプレートなどはどうするのかなど、基本的レギレーションを決める（弊社の環境ツールはBEM/Sass/Local by Flywheel）設計段階で決めたテンプレートやレギュレーションに即してWebページを制作する。案件によっては画像素材の撮影や取材を行い企画に沿ったコンテンツも制作する。

テスト

テストサーバーを用意する（本番環境が同様な）そこに制作したWebデータをWebサイトとして構築する。内部テストおよびクライアント確認を行い、修正箇所やバグがある場合は修正を行う。

納品とWebサイト公開

最終テストを行い、クライアントに承認をもらった後に、Webサイトを納品する。弊社の場合、指定されたWebサーバーにUPまたはDVDディスク納品のどちらかにて対応しています。Webサイト公開までに基本的なワークフローは同じであるが、Webサイトのタイプによってデザインワークに時間をかけたり、UI・UXの調整に時間をかけるなど、細部の進行に違いがあることもあります。また、ジェイアイディではアジャイル型を推奨しておりクライアントのニーズを盛り込みながら制作を進めている。それによってある程度のところで公開し、公開後にブラッシュUPすることでスピード感持って進めることが出来る。

ホームページ or Webサイトってどちらが正しいのか考察してみます。

「ホームページ」「Webページ」「Webサイト」は、ほぼ同じ様な意味合いで使う事がありますが、意味合いが少し違います。あなたが今見ているような、ブラウザのウィンドウに表示されるページのことを「Webページ」と言います。Webページが集まって一冊の本のようになっているWebページ群を「Webサイト」と言います。その表紙にあたるWebページを「トップページ」と言います。

「ホームページ」とは？

企業・個人などのウェブ ページで、最初に閲覧されることを意図したページ。また、広義にウェブ ページ一般を指すこともある。

もともと、Webブラウザを起動したときに最初に表示されるページのことでした。現在も、ブラウザの設定画面やツールバーに「ホーム」「ホームページ」などの表記が残っています。ホームページには、GoogleやYahoo!JAPANなどポータルサイトのトップページを設定している人が多いと思いますが、このように、Webサイトのトップページをホームページに設定する人が多かったため、Webサイトのトップページのことを「ホームページ」と呼ぶようになりました。

「Webサイト」とは？

ウェブサイト（英: website）は、World Wide Web (WWW) 上にあり、一般に特定のドメイン名の下にある複数のウェブページの集まりのこと。サイトと呼ばれることもある。企業などの団体が自身を紹介するため自ら構築したサイトを、その団体の公式サイトなどと呼ぶ。

ウェブサイトはウェブページの全体や存在を漠然と示す場合に使われ、ウェブページは特定のページや複数のページを指す場合にも使われる。

どっちが正しいの？

まとめ

「ホームページ」は、元々はWebサイトのトップページの事

「Webサイト」は、Webページが集まった意味のあるまとまり

今回は、PCリプレースも兼ねてジェイアイディのWeb制作環境（パソコンなど）について考えてみます。

現状のWeb制作環境（パソコン環境）

まず、現状のジェイアイディにて使用しているPC・タブレット・スマートフォンを箇条書きします。

制作：iMac ・Macbook Pro ・Mac mini・HP Z820・自作PC

営業：Windows 10のノートPC（部長だけWindows 7）

共通：iPad pro 12.9・iPad 9.7・iPhone・galaxy s9

基本的の方針としては、クリエィティブ（Web・デザインなど）はMacを推奨とし、営業はWindowsノートPCとiPadの二台持ちにさせています。しかしながら、クリエィティブではCGや動画制作などでWindowsを使わなければいけない案件が増えたためZ820のようなHPのワークステーションや自作PCなどを使わなければいけない状況です。また、営業に渡してあるiPadは正直なところあまり活用されてません。最後にiPhoneは電話・テザリング・メール・カレンダーなど頻繁に使用され仕事になくてはならない存在です。iPhoneがおかしくなるると部長からすぐ電話がきますが（笑）

リプレースの基本方針

「シンプルでクールでかっこいい」

デスクトップPCとノートPCのどちらが良いか？

とりあえずハードとしてデスクトップとノートパソコンのどちらを選ぶか決めなければなりません。営業はノートパソコンの一択で決定なのですが、問題はクリエィティブです。デスクトップの方がスペックもコスパも良いのですが、持ち運べません。ノートパソコンの方なら、クリエィティブに使うスペックだと結構なお値段がします。また、外部ディスプレイやドッキングステーションも用意しないと不便かもしれません。本当に悩ましいです。そこで、同僚のMacbook pro 2016タッチバー有りモデル（木村さん個人所有）を試しに使わせてもらったのですが、IllustratorもPhotoshopもサクサク動いたのでWeb制作やグラフィックデザインなら吊るしMacbook pro 13のスペックでも大丈夫でしょう。外部GPUボックスも対応になったことだし社内PCは基本はノートパソコンにします。

余談ですが、わたしはきのこ派 or たけのこ派なら断然きのこ派です。

MacとWindowsならどっち？

OSは統一した方が、良いに決まっているってことで「シンプルでクールでかっこいい」基本方針のイメージでMacを採用したいと思います。ただし、どうしてもWindowsを業務で使用しなきゃいけない時にはBootcampで入れたWindowsでしのぎます。きっと部長のMacbook proは常時Windowsな気しかしません笑（キーボード変換表シール作らないと・・・）

自作PCのhackintoshで夢をみよう

吊るしMacbook proなら、きっとクリエィティブから苦情が出るでしょう。「メモリ８GBとか舐めてんの！？最低１６GBでしょ！いや？３２GBなきゃ無理だよ。」安心してください。Macbook proと同じ値段なら（実際には少しプラス）で自作PCに変更出来る権利を与えましょう。ただし、hackintoshで夢をみるまでには険しい道のりが待ってます！（実際には、hackintosh大好きな私がお手伝いいたします）

MacbookとiPadの２台持ちはやめます

apple pencileに感動してiPad Proを導入したのですが、私たちにはまだ時期少々だったようです。理想的には、営業にはノートパソコンを無くしiPadのみに出来たら良いなと考えていたのですが、どうしても不便でパソコンを使ってしまうそうです。また、同じ作業をiPhoneで十分で手軽に出来るため出番が少なくなりがちでした。そのため、今回はシンプルにMacbookのみにしようと思います。

リプレース完了後のWeb制作環境（パソコン環境）

普通の人：

MacBook Pro Retinaディスプレイ 2300/13.3 MPXT2J/A [スペースグレイ]

液晶サイズ：13.3インチ CPU：Core i5/2.3GHz/2コア ストレージ容量：SSD：256GB メモリ容量：8GB

夢追い人：

自作PC

全ての人：

24型の外部ディスプレイ

Apple Magic Keyboard 

Apple Magic Mouse