WEB制作

WEB制作

【SEO】専門系ブログと雑記系ブログ、SEOに強いのはどっちか考察したみた

専門分野に特化したブログと、オールジャンル的な様々な話題を1つのブログで綴った雑記系ブログはは、SEOの観点から見るとそれぞれどのようなメリット/デメリットがあるのか考察してみた。

専門系ブログの特長

特定の専門分野を絞って深堀したブログ。

企業のブログなんかは企業自体が一般的に何らかの専門分野を商売にしているので、こちらに分類されることがほとんど。

個人のブログでもメインテーマが明確になっている場合は専門系に分類される。

専門系ブログのメリット

その話題に関連したユーザーを集中的に集客できる。

関連記事なんかで初見の訪問者でも、1ユーザーあたりのPV数を増やすことかが期待できる。直帰率を減らせたり、リピーターになってくれる可能性が高い。

専門系ブログのデメリット

世の中のトレンドやGoogleのコアアップデートなど時流に左右されやすい。

例えば、特定のマリトッツォや高級食パンを題材にしたブログだったら、トレンドが去ってしまった時がそのブログの旬も終わることになる。

雑記系ブログの特長

何の気なしに個人がブログを運営すると、基本的には雑記系になる。

日常の色々なことや、興味のある分野を色々投稿していくのが雑記系ブログだ。企業運営の場合は少数派で、ベンチャー企業の社長とかの「社長ブログ」的な人に結びいてたものなどが中心。

雑記系ブログのメリット

基本的にテーマは何でもいいので、日常の出来事なども含めて投稿できるのでネタに困りにくい。むしろ雑記系ブログでネタに困るようなら、ブログ運営に向いていない。

その時々でトレンドに合わせた記事を投稿できるメリットがある。

雑記系ブログのデメリット

サーチエンジン流入が大半を占めるので、一見の新規客が多くなる。関連した記事が少ないと直帰率が高くなる。

記事やブログの魅力は運営者自身に結びついているので、長期的にアクセスを伸ばそうと思うと戦略的に取り組まないとならない。SNS流入を増やすにはこちらも戦略的にな取り組まないとならない。

ある程度、テーマに一貫性が出てきたら専門系ブログに記事を移行する方法も考えられるが、それなりに移行の手間がある。

ハイブリッドタイプという選択も

世の中のブログは専門系と雑記系の方に、それぞれの良い部分をミックスしたハイブリッドタイプもある。

専門性を持ったメインテーマを主軸に、雑記系も併せて投稿して検索流入を期待するというものだ。

SEOは生き物みたいなもので、特定の専門分野だけだとトレンド次第で流入が確保できなくなってしまう場合がある。その流入現象をトレンドに合わせた雑記系でカバーするというものだ。

本来の専門性を失わずにいれば、お互いのデメリットを打ち消すことも可能なので、3つの目の選択肢としては良いだろう。専門系の流入と雑記系の流入が一緒くたになるので、デザイン性や階層構造には工夫が必要となり運営難易度は割と高いデメリットはある。

WEB制作

Git処女のWebデザイナーがGitでギトギトにならないために独学したこと

Gitは今主流のバージョン管理システムで、ITやWebの現場で導入されている。

Webの現場だと、基本的にはGitで扱えるのがソースコードなど「テキストデータ」で、差分で威力を発揮する性質があるため、プログラミングとかコーディングとかシステム開発寄りのWeb制作現場で導入されている印象。PSDとか画像系のファイルなんかではGitの真価は基本的に発揮できない。

とは言っても、デファクトスタンダードなだけにGitを導入している現場やプロジェクトは増えている傾向が垣間見れるので、Git未経験のWebデザイナーがこっそり独学してみた。この記事はその記録である。

あと、タイトルが昭和生まれ感丸出しだが、そこは絶妙にスルーすること。

とりあえずざっくり用語を覚えないとならない

Git導入の障壁はインストールとかじゃなくて、それ以前に独自用語満載なこと。

日常生活や一般のPCやネットでは聞きなれない用語ばっかりなので、ざっくり意味を頭に入れておく必要がある。

学習にはSoucetreeというWindowsやMacで動くGUIのフリーソフトを使っているので、Sourcetree用語も混ざっているかもしれない。

バージョン管理システム

Gitが主流で今から学んだり導入するなら一択。ファイル更新の差分を記録していって、ゲームで言うセーブポイントみたいなもの。好きな時に好きなセーブポイントを呼び出したり、共同作業している他の人のセーブデータとミックス(Git用語でマージ)したり出来る。

リポジトリ

Gitで管理させているフォルダのこと。1つのPCやサーバーに複数のリポジトリを持つことができる。

ローカルリポジトリ

自分のPC上にあるリポジトリのこと。

リモートリポジトリ

Gitに対応した専用のサーバー上で複数人で共有するリポジトリ。会社とかでGit導入しているって言ったら複数人での作業なので、すなわちリモートリポジトリを扱うということ。

コミット

「結果にコミット」ではなくて、ファイルの変更結果をリポジトリに記録することをGitではコミットという。

ちなみに、RIZAPの「結果にコミット」はキャッチコピー的な和製英語であって正しい英語ではない。RIZAPのせいで混乱しないように。個人的にはRIZAPの株価は結果にコミットしなかった。

.gitignore

リポジトリ内にあるけどGitで管理させないファイルを記録するテキストファイル。何もしないとリポジトリ内にあるファイルは自動的にGitが全て管理してしまう。

ブランチ

作業結果を分岐させた枝分かれのこと。ある地点からリリース版、機能追加版、次期バージョン・・・などと分岐させて作業する時などに使う。ブランチの使い方はチームやプロジェクトによっても違う。

朝食と昼食を兼ね備えた食事のこともブランチというがGitのブランチは別物。

マージ

枝分かれしたブランチを合流、ミックスさせること。

合流させる方法によってファーストフォワード方式、オートマージ方式などがある。基本的に他人が同じ部分を編集してしまった場合は、話し合いか金の力を使って個別に解決しないとならない。

チェリーピック

特定のコミットをピックアップして現在のブランチに適用する操作。日本語で言うと「つまみ食い」「えり好み」という意味。

タグ

そのへんのタグと似たようなもので、コミットにわかりやすいように名前を付けておく機能。「Version1.0」とかが典型的。

リモートリポジトリを使う

Gitの本領発揮というか、会社で使う場合はこっちが想定される。

Gitという技術の総称とは別に、リモートリポジトリの機能を提供するサービスは無償、有償それぞれいくつか存在する。

Backlog

プロジェクト管理ツールでGitのリモートリポジトリも扱える。無料で使えるフリープランもある。日本企業が運営しているので日本語でわかりやすい。

GitHub

初心者がGitと聞くとイメージしてしまうくらいに有名なのがGitHubだが、色々あるリモートリポジトリサービスのうちの一つでしかない。

公開されるリポジトリであれば無料だが、非公開の特定の人だけアクセスできるプライベートリポジトリは有料。・・・だったが、2019年1月から無料プランでもプライベートが選択できるようになった。使えるオープンソース系のソフトとかの置き場所として利用されている場合が多いのは無料だからというのもあるだろう。

BitBucket

Sourcetreeのの開発元が提供しているリモートリポジトリサービス。

プライベートリポジトリが無料で使える。5人以上は課金対象という仕組み。

GitLab

自分でサーバーにインストールして使うようなタイプ。会社によっては導入しているのかもしれない。初心者の個人向けではない。

リモートリポジトリの用語

共同作業だけに用語がわかっていないと意思疎通できないので覚えないとならない。

プッシュ(push)

ローカルリポジトリのコミットとファイルを、リモートリポジトリにアップロードすること。

プル(pull)

リモートリポジトリから変更ファイルと履歴をダウンロードすること。

クローン(clone)

リモートリポジトリの内容を自分のPCにコピーすること。よくGithubからオープンソースのソフトとかをダウンロードしたりするのはクローン。

ハマった所 リモートリポジトリのHTTPSとSSH接続

『サルでもわかるGit入門』という本を見ながら独学をして行ったが、詰まったのがSourcetreeでBacklogにプッシュするところ。

サルでもわかるのに人間の自分がわからんというのはサル以下なのか・・・と心が折れてしまうから、この手のタイトルは毎回辞めて欲しいと思う。

詰まった原因はよくわからなくて迷宮入りしたけど、本に書かれているHTTPSという簡単な手順ではなくて、自分で調べたSSH接続したら一発で上手くいった。おそらく、本よりバージョンが進化しているので設定が違ったりしたことによると思う。

認証させることはGitを使いこなすスキルと関係ないので、接続が上手くいかない時はSSH接続を試すとよい。SSHの公開鍵だのプライベートキーだのはSoucetreeのツールメニューから設定でき、Backlogにぶち込めばよい。あとはSourcetreeの案内に従ってポンポンやってプッシュに成功した。

ここまでやれば、とりあえず処女卒業と言って良いだろう。妄想だけでは限界があるので、あとは実戦で経験回数を増やしていくしかないと思う。

WEB制作

Webデザイン経験者がUI/UXデザインを知ったかぶるために学んだこと

最近、Webデザイン界やアプリ制作などの界隈でよく耳にするのが「UI/UX」という言葉。

なんとなくわかるけど、細かくはわからないというのが実情であり、勉強して知ったか程度には理解する必要があった。

むしろ、最近はWebデザインの仕事なんかでも「UI/UXは経験ある?」「UIわかるよね?」とか、これまた知ったかの人たちが聞いてくる場合があるので、対抗するためにもWebデザイナーも知ったか程度の知識は必要なのだ。

対象読者

筆者と似たような状況にある人。

・WebデザインなどUI/UXデザイン以外のデザイン経験者
・UI/UXが何の略かはとりあえずわかる
・とりあえず知ったか程度の知識を身に付けたい

UI/UXとはなにか

二つ並べられてセットにされがちだけど、それぞれ別物。

UXという幅広い概念の中に、UIという限られた世界がある。知ったかとして振る舞うには、UXの中の一部がUIだと知ってればOKだ。日本(UX)の中に東京(UI)があるので、対等なものでもないし、逆は有り得ない。

それでもUIはUXに影響を与える重要なものである。それぞれ細かく解説していく。

UIとはなにか

UIはユーザーインターフェースの略。

「UIがどうの~」とか言われたら、とりあえず「ユーザーインターフェースのことですね?」とドヤ顔で返せば知ったかできる。困ったときのオウム返し手法の発展版だ。

Webサイトとかアプリとかのクリックやタップできる部分だとか、ユーザーがコンテンツを操作するための接点となる部分がUIだ。

UXとはなにか

UXはユーザーエクスペリエンスの略。

エクスペリエンスなんて単語は普段は使わないと思うが、体験や経験を意味する言葉だ。ちなみに、Windows XPのXPはエクスペリエンスの略。

その対象物を知ってから、対象物が物理的に消滅したり、あなたの記憶から完全に抹消されるまでの体験全てがUXだ。

つまり、UXとは極めてユーザーの主観に基づいたものである。体験をデザインするなんて言われると、UI/UXデザイナーが格好いい仕事に思えてしまう。

UI/UXデザインが向上するには競合が必要

あなたも経験があると思うが、自治体のWebサイトとか、公共施設の予約システムだとか、JRの「えきねっと」とかの予約システムとかは非常に使いにくいし、デザインが洗練されていない。

それはUI/UXデザインが向上するためには、競合と争いながら付加価値として改善していくプロセスが必要だからである。

自治体やJRの予約システムが使いづらくても、代わりの手段がな存在しないのだからユーザーは我慢して使わなければならない。そこにUI/UXが改善する余地はないのである。

対して、競合が存在するサービスではUI/UXは日々磨かれていく。

例えば、筆者の身近なところだと、楽天が運営する「楽天トラベル」と、リクルートが運営する「じゃらん」は旅行予約サイトとして競合関係にある。記憶に新しい所では、GoToトラベルの醜いドタバタ劇では、楽天がGoTo割引に対応するや否や、じゃらんも対応させたりと、それぞれがUX/UIを向上させるために日々改修しているのだ。

ちなみに、この界隈ではデザインとは「設計」を意味するのであって、芸術性とか視覚的な美しさではない。もちろん、芸術性や資格的な美しさを兼ね備えているのが理想的だが、画面構造だとか予約手順とかの「設計」がデザインの両悪の判定基準になる。

デバイスごとの操作性の特長

デバイスが持つ特長を理解しつつUIを考えることが大事。

PCの特長

大きいモニターと、キーボード、マウスやトラックパッドを備えているのが特徴。

マウスやトラックパッドで細かい操作ができ、「ホバー」が使えるのでクリックできるか微妙な対象物もクリックできることをやんわり伝えることができる。

縦スクロールには強い一方で、一般的に横スクロールは非常にやりにくい。

スマホ、タブレットの特長

タッチパネルで指を使って操作するのが特徴。

指で操作するため、リンクやボタンはある程度の大きさが必要。指で細かい入力をするのは大変なので、ゆったりしたボタン間隔などゆとりあるデザインが好まれる。

文字入力は基本的にソフトウェアキーボードなので大量に素早く入力するのはPCより向かない。閲覧用に適したデバイス。

PCと違って「ホバー」が使えないので、一目見てクリックできるとわかる必要がある。

テレビの特長

最近のテレビはインターネット機能があったりするのが当たり前で、これもUI/UXデザイナーの仕事の範囲だという。

ゲーム機とかクロームキャスト的なデバイスも同じだろう。

このデバイスの特長は、「十字キー」「決定」「戻る」の3つで操作するのが基本ということ。PCやスマホのように画面の好きな場所をいつでも選択することはできず、カーソルを移動させていくため、要素の連続性が重要になる。

フォーカスの移動を縦方向のみや横方向のみなどにすると入力の負担が減る。PS3とかPS4のホーム画面なんかが良い例だろう。

音声で操作できるのも一般的。PCやスマホとは違ったUI/UXの世界があるのだと思っておけば、知ったかクンとしては修羅場を切り抜けられるのではないだろうか。

Webサイトとアプリの違い

UI/UX界隈で主戦場となるであろう、Webサイトとスマホなどのアプリの違いについて知ったかぶる知識を述べる。

Webサイトの特長

・PCやスマホに入っているブラウザで、とりあえずサクっと使って貰える
・マルチデバイス展開が比較的容易で、レスポンシブによってWebデザイナー的知識で十分対応可能
・ハードウェアに合わせたインタラクティブな作りに限界がある
・良くも悪くもURLによって管理されている

アプリの特長

・個別にインストールしたりと手間がかかる
・ハードウェアの合わせたインタラクティブな作りが可能
・通信量を抑えたり、Webサイトより軽快な動作が可能

インタラクションコストとは

ユーザーが受ける負担のことをインタラクションコストと呼ぶ。

インタラクションコストが小さいと、ユーザービリティ(サービスの使いやすさ)が良いということになる。

インタラクションコストが高い例

・どこをクリックしたらいいかわからない
・パッと見で判断が付かない
・スクロール、移動が大変
・スマホで指が届かない
・持ち換えないとならない
・同じことを何度もしないとならない
・アタマを使わせるデザイン全般(精神面)

UI/UXがわかるデザイナーとして知ったかぶるには、これらを最小にさせる必要がある。

最後の「アタマを使わせるデザイン全般(精神面)」はインタラクションコストの代表的なものでもある。

例えば、虫メガネアイコンは検索という暗黙の了解があるし、フロッピーみたいなアイコンは保存だ。暗黙の了解を理解してデザインすることによって、アタマを使わせる率を減らせることになる。

個人的に最近インタラクションコストが高いなと思ったのは、キヤノンの某画像ストレージサービスだ。一般的なアイコンで使われている意味と違う動作をするし、画像ストレージで大量の画像をアップロードすることが多いにも関わらず、100枚単位でしか選択できなくてストレスフルだった。

UI/UXはあらゆるWebサービスにおいて重要だということだ。

UI/UXデザイナーが主に使うツール

平均的なWebデザイナーの仕事に比べて、画面遷移やボタンのタップ感覚などの操作性のテストや共同作業も多くなるので下記のような専用ツールを使うのが一般的。

Adobe XD

Adobe Creative Cloudに含まれていてWebデザイナーにも敷居は低い。Adobe製品の使い勝手に慣れていれば、勉強しないでも何となく使えるのが魅力。

Sketch

2014頃のFireworks開発終了アナウンスくらいからジワジワと代替ツールとして人気が出てきたらしい。99ドルだから1万円弱で買い切り(アップデート1年間)で、Mac専用かつ英語のみ(?)、プラグインで機能拡張するのが特徴。ガチなUI/UXデザイナーが使っているイメージ。

Figma

秋葉原界隈では萌えフィギュアのブランドだけど、UI/UX界隈ではWebブラウザで動作するUIデザインツール。個人用で限定的な機能だけど、アカウント登録だけで無料で手軽に使える。Adobe CCを契約していなくて、UIデザインの雰囲気を学んでしっかり知ったかぶるにはオススメだろう。英語のみなのとブラウザで動作するタイプなので、作り込んでいったら動作安定性などが未知数。

prott

画面遷移などスマホ実機で動くプロトタイプ作成ツール。XDとかでも実機で動かせるけど、よりプレゼン向きな気がする。Webディレクター向けの本に紹介されていたので、ディレクター系の職種でも使われているはず。料金プランは無料プランありでサブスク形式。Webブラウザで使うタイプ。

Justinmind Prototyper

Windows、Macのインストール型。Prototyperがアプリ名だと思うけど、同名の別物の似たサービスが日本企業からもリリースされていてるのでJustinmind社のPrototyperということにする。パッと見、インストール型だしXDみたいな感じ。フリープランもあるが、有料版で機能がプロっぽくなるものの、全部英語で日本語での最近の解説は少な目な印象。日本でのシェアは少ないんではないかしら。

「赤信号、みんなで渡れば怖くない」派の人は、XD、Sketch、Figmaあたりを触っておくとツールについても知ったかぶれるはず。

より深くUI/UXを学ぶためには

とりあえず、ここで述べたくらいのことを知っていたり意識していれば、UI/UXについて知ったかぶることはできるはず。

しかし、UI/UXはWebデザイナーだったり、アプリのエンジニアだったりが、基本スキルの延長線上に身に付ける学問的な匂いがする。最近は急速にUI/UX専門のデザイナーが求められている気もするが、そういった仕事に就いていない場合は独学で学びにくいのも事実である。

今回の記事作成に当たって参考にした書籍は下記。書籍名の通りだが、教科書的に必要な知識が網羅されているので、知ったかぶるだけでなく、ちゃんとした知識を学びたい人にはオススメだ。