OWN MEDIA

CATEGORY : NEWS

2018.06.21

Webサイトをデザインすると言うこと

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

Webサイトのデザインとは

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

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

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

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

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

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

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


2018.06.21

Webサイト制作のワークフロー

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

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

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

要件定義

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

企画立案

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

プレゼンテーション

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

承認・発注・仕様策定

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

設計と制作

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

テスト

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

納品とWebサイト公開

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


2018.06.21

ホームページ or Webサイトの違い

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

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

「ホームページ」とは?

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

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

Webサイト」とは?

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

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

どっちが正しいの?

現在では全てを「ホームページ」と呼んでしまってます。さらに、インターネットが普及期に差し掛かり、WebブラウザやWebサイトのことを知らない人に説明する過程で、本来「Webページ」「Webサイト」と呼ぶべきところをすべて「ホームページ」と呼んでしまう現象が発生しました。このため、現在では「Webページ」「Webサイト」全てを「ホームページ」という言葉が使われています。そのため、「Webサイト」と呼ぶのが正式には正しいと思われます。

まとめ

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

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


2018.06.21

私たちのWeb制作環境を考察 2018

今回は、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なら、きっとクリエィティブから苦情が出るでしょう。「メモリ8GBとか舐めてんの!?最低16GBでしょ!いや?32GBなきゃ無理だよ。」安心してください。Macbook proと同じ値段なら(実際には少しプラス)で自作PCに変更出来る権利を与えましょう。ただし、hackintoshで夢をみるまでには険しい道のりが待ってます!(実際には、hackintosh大好きな私がお手伝いいたします)

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

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

CPU Intel CPU Core i7-8700K
CPUクーラー CRYORIG H7
メモリ CORSAIR DDR4-2666MHz  VENGEANCE LPX Series 8GB×2枚キット CMK16GX4M2A2666C16
マザーボード ASUS PRIME Z370-A
SSD Samsung SSD 250GB 960 EVO M.2 MZ-V6E250B/IT
Samsung SSD 250GB 860 EVO MZ-76E250B/EC
HDD WD30EZRZ-RT [WD Blue(3TB 3.5インチ SATA 6G 5400rpm 64MB)
光学ドライブ Pioneer BDR-209BK/WS2 | パイオニア(Pioneer) 
ケース Fractal Design Define R6 – Blackout CS7008 FD-CA-DEF-R6-BKO
電源 FSP AURUM92+シリーズ 650W PT-650M

全ての人:

24型の外部ディスプレイ

Apple Magic Keyboard 

Apple Magic Mouse


2018.06.21

Webサイトのリニューアルで大切なこと

Webサイト担当者として、最も力の入る仕事と言えば「Webサイトのリニューアル」ではないでしょうか。

一方で失敗しやすい業務でもあり、リニューアル直後は新鮮味や満足感があるにも関わらず、その後にWebサイトの運用効果が表れなかったことで責任を追及されたりなんてこともあるかもしれません。 近年、Webサイトはどの企業にとっても重要な位置を占めるようになりました。企業は目的を持ってWebサイトのリニューアルを成功させたいと思っていますが、知識や経験がないために多くの企業が失敗しているという事実もあります。「Webサイトのリニューアル」は、トレンドと正しい知識を持って取り組めばより良いコンバージョンへ繋がります。

今回はそんな、「Webサイトのリニューアル」が失敗しないための注意点を紹介していきますので、今後リニューアル予定のある方はぜひ参考にしてみてはいかがでしょうか。

Webサイトのリニューアルの目的を明確化しよう

一番大事なことですが、なぜ「Webサイトのリニューアル」をするのか目的・ゴールを明確化しましょう。目的・ゴールがはっきりしていればサイト構成やデザインを決める上でブレずに進むことができます。もし、さまざまな案があり盛り込みすぎて迷走してしまってた際も、その目的・ゴールに立ち戻れば良いのです。

リニューアルのタイミングを決めよう

Webサイトリニューアルといのは“いつでもいい”というわけではなく、適切なタイミングが必ずあります。例えば、ケーキ屋さんWebのリニューアルならアクセスが集中する10~11月前にリニューアルを完了しているのがベストです欲を言えばリニューアル後の効果測定期間をある程度設けると良いかと思います。このように、サービスの種類やWebサイトの特性によってリニューアルの適切なタイミングがあるので、“今リニューアルすべきか?”をしっかりと考えた上でプロジェクトを立ち上げましょう。

UIとUXを取り入れよう

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

まずUXを考える上で大切なことはWebサイトに来て欲しい顧客(ペルソナ)にサイトでどんな行動をしてほしいのか、サイトを見た結果どうしてほしいのかを目的を明確にしましょう。その目的がお問い合わせとするならば、顧客(ペルソナ)がお問い合わせをスムーズに心地よくできることがUXの改善となります。

スマートフォン対応

2012年のニールセンの調査によると、アメリカのスマートフォン及びタブレット端末の利用者の約80%は、携帯端末を買い物関連の行動に使用したことがありました。この時点では、タブレットユーザーがスマートフォンユーザーよりも商品を購入する頻度が多かったのですが、スマートフォンを中心としたUXデザインの傾向が続いているため、現在に至るまでスマートフォンユーザーの割合が増え続けています。スマートフォンやダブレット端末からインターネットにアクセスするユーザーが、デスクトップからのアクセス数を上回るようになったのは2016年後半からです。レスポンシブデザインはアクセスした人のデバイス(PC/スマートフォン/タブレット端末など)の画面サイズに合わせて自動的にレイアウトが切り替わるため、あらゆる画面サイズに途切れることなく瞬時に対応します。


CATEGORY

詳しい会社案内をダウンロードいただけます

DOWNLOAD OF CORPORATE PROFILE

会社案内ダウンロード

CONTACT

お問い合わせ

株式会社JIDは、
欠かせないパートナーを募集しています。

お問い合わせ