アールズ株式会社サイトデザイン

アールズ株式会社Webサイト改善

クライアント:所属会社 アールズ株式会社

サイト:アールズ株式会社

 

所属している会社のコーポレートサイトを大幅改修しました。

 

基本のサイトをほぼ全て変更

  • 会社の強み説明の強化と仕事依頼につなげるための構成を設計
  • ブログページや開発実績ページのリデザイン
  • SNS連携の仕組み
  • 見出しやスライドショーなどの見せ方の工夫
  • 関連ページ閲覧の動線や余計なウィジェットを排除して、サイト回遊率をあげる施作
  • 問い合わせフォーム最適化
  • サイトヘッダ、フッタの見直し
  • Google Analytics、Google Search Consoleによるサイト分析開始
  • ブログ記事の定期的執筆

 

上記のサイト設計・デザイン変更により、月のアクセス数は130%増、検索クリック数は200%以上の増加と大きく改善しました。

また、サイトからの仕事や求人の問い合わせが激増しました。

 

サイトデザインが向上した以上に、求人や仕事につなげるための意図を持ったブログ記事更新が効いています。

ただの技術系記事を書くにしても、弊社ではこういうことやっています/こういうことをやるとうまくいきますよ→だから弊社に依頼/求人応募すると良いことがありますよ、というテイストを一貫して崩さず書いています。

Webサイトは見た目の綺麗さももちろん大事ですが、意図を持ってテキストコンテンツを書かないことには、絶対に集客できません。自社サイトを使って実験をしたことで、テキストコンテンツの重要性がより確信を得られました。

 

デザインBefore

サイト改修前のデザイン

 

デザインAfter

サイト改修後

名古屋ギターフェスティバルサイトデザイン

名古屋ギターフェスティバル2017

クライアント:生田直基様

公開サイト:名古屋ギターフェスティバル2017

 

ワイヤーフレーム、コーディング、サイト設計担当

HTMLコーディング作成と、Wordpressテンプレートをスクラッチから作成。

また、全体のサイトマップを作成を担当し、効率よくユーザーがサイト閲覧できるUXの実現を目指した。

 

SEO対策担当

SEO対策として、各種プラグインを導入。キーワードツールにて、関連キーワードの洗い出しを行い、集客できる記事作成方法のレクチャーを行なった。

 

サイトデザイン

名古屋ギターフェスティバル2017全体デザイン

 

 

 

コラム「副業Webデザインで仕事を受けるには」

クライアント:ランサーズ株式会社様

掲載メディア:THE LANCER

 

クラウドソーシング業界トップのオウンドメディア

僕はランサーズでライティング案件を受けていたりするのですが、その成果が認められたのか、ランサーズ本体のオウンドメディアで書かせていただけることに。ライターは無茶苦茶いるものの、Webデザイナーをやっててライティングもできるという人材は貴重とのこと。Webデザインをうまく副業にするには的テーマで書きました。

 

ちょっと話題に? 副業ノウハウを全公開

シェア数70程度、人気ランキングに入るなど少し話題になりました。ランサーズ上でどのように仕事を探すか、9000文字超の大ボリュームで書きました。ぶっちゃけ僕がやっていることをまんま書いたので、実際に使えるネタになっています。

 

 

ひとまずスモールキーワードは網羅

検索ボリュームは少ないものの、使えそうなキーワードでやや上位に。検索流入も少しは見込める記事になったかと思います。

 

ランサーズのランディングページ

Expert Writer’s Portfolio ランディングページ

クライアント:ランサーズ株式会社

公開サイト:Expert Writer’s Portfolio

 

流行りの非平行ヘッダ

セクションごとの区切りを単純な四角ではなく、少し形を変えて表現をしてみました。矢印的な区切りをもうけ、次の内容へと視線誘導をするのが狙いです。

 

非平行ヘッダ導入例

 

画像で区切りを表現することもできますが、デバイスサイズごとに拡大/縮小されて色味が狙ったものにならない可能性があるので、すべてCSSとjQueryで実装しました。

 

実際、ちまたのサイトでも非平行ヘッダは流行っているようです。

[blogcard url=”https://ferret-plus.com/6472″]

 

ランサーズ様おすすめのライター紹介ページでしたので、プレミア感を出して欲しいというご要望がありました。そのため、流行りを積極的に取り入れる&フォントも游明朝などの質の高い書体を使い、綺麗で読みやすいものを意識いたしました。

 

 

レスポンシブデザインによるhtml一本化

Chromeのデベロッパーツールをフル活用してCSS調整を行いました。4kディスプレイからiPhone5sまであらゆるデバイスでまったくレイアウト崩れはありません。

 

いわゆるレスポンシブデザインというものですが、

 

 

PC表示時

pc表示時

 

 

スマホ表示時

スマホ表示時

 

スマホ表示もPC表示もひとつのhtmlファイルの記述だけですみますので、更新作業が格段に楽になります。特に今回はライター16人の情報を記載すると言う情報量が多いページでしたので、スマホサイト版とPCサイト版で情報の齟齬があるということがなく大変楽です。

 

スマホ版とPC版でhtmlが分かれていて、更新が大変と言う方は、ぜひ僕にご相談いただければと思います。

 

 

メールマガジン作成

溶剤リサイクル装置のメルマガ

クライアント:非公開

 

競合分析による明確な差別化

工業用廃棄溶剤をリサイクルする装置のメルマガテキストを担当。知見のない分野でしたが、ご担当の方からいただいた情報と自ら競合商品を調査、分析することで、明確に強みを差別化し、適切なアピール文を考えることができました。

 

反応を高める取り組み例

例えば、製品のカタログを見てもらいたい、というリンクを作成する際、どのようにテキストを考えれば購読者の反応を高めることができるでしょうか?

 

悪い例

製品カタログ

http://catalogue.jp/catalogue.html

 

改善例

▼製品スペックを確認してみる

http://catalogue.jp/catalogue.html

 

 

改善例のように、ただカタログがあるよというアピールをするのではなく、リンク先で購読者が何をできるか、具体的な行動を明示することが反応を高めるポイントです。

 

メルマガ制作というと、文章力があるとかコピーがうまいとかそう言うところに目がいきがちですが、ぶっちゃけ文章力は最低限でいいと思います。

 

それよりも重要なのは、こういった細かなユーザー心理を汲みつつ、テキストが端的にまとめられていることが重要です。小説のような流麗な文章は狙って行う場合以外はまったく必要ありません。そもそもほとんどのユーザーはメルマガを真剣に読まないのですから、心理に訴える構成を論理的に考えることが重要となります。

 

メルマガで反応を高めるための仕組みは、Googleが出しているオンライン講座が一番参考になります。(googleアカウントでログイン→メールマガジンの活用)

[blogcard url=”https://learndigital.withgoogle.com/digitalworkshop-jp/” title=”Googleデジタルワークショップ”]

 

是非上記URLを参考に、良いメルマガテキストを実際考えてみて、それでもうまくいかなければ僕にご相談いただければと思います。テキストだけでなく、HTMLメールの作成依頼も受け付けておりますよ〜。

(HTMLメールだと開封率とかどこをクリックされたとかの解析が容易で楽しいんですよね。)

 

 

イトウコウヘイ氏のサイトデザインカスタマイズ

Kohei Ito Design WordPressテンプレート

クライアント:イトウコウヘイ様

サイト:koheiito.com

 

既存テーマGridsbyのカスタマイズ

ポートフォリオによく使用されるWordpressテンプレート「Gridsby」をベースにカスタマイズを行いました。

 

 

記事のランダム表示

ポートフォリオの実績一覧をリロード毎にランダム表示させる改造を行い、初見のユーザーに満遍なく実績を見てもらう仕組みを取り入れました。

 

 

レイアウト微修正

PCレイアウト時のハンバーガーメニューの廃止、レイアウトをクライアント様好みにカスタマイズいたしました。

 

 

サイト全体キャプチャ

koheiito サイト全体

実の母親がパンチラを阻止する

巨大美少女のパンチラが見たいからそういう世界をUnityで作る

クライアント:バーグハンバーグバーグ様

掲載メディア:オモコロ

 

不謹慎なことを高尚なプログラミングで行うギャップ

PS3のゲームなど、あらゆるゲームに使用されているUnityというゲームエンジンを用いて、美少女3Dモデルのパンチラを見るという最低最悪な記事です。3Dモデルには東北ずん子という東北のイメージキャラクターを使用。動きのアニメーションをUnityちゃんから拾ってきて3Dモデルに適用し、プログラミングしてみたいな。

 

高校の恩師がパンチラを阻止する 実の母親がパンチラを阻止する

 

ただパンチラを見るだけだと面白くない(あとむちゃくちゃエロくてNG)ので、お邪魔キャラとして高校の恩師や自分の母親を出したりと、アホなことをやってみました。

 

我ながら、敵キャラにいろんな人の顔を埋め込みすぎ。

[blogcard url=”https://yhei-web-design.com/work/kiraina/”]

 

 

エロ系はソーシャルで不利?

どうしてもパンチラというワードばかりが目立ってしまい、シェアしにくい記事となってしまったせいか、90RTほどとあまり伸びず。原因ははっきりしていて、シェアされやすい記事のポイントは主に4つ。

 

・周りに頭が良いと思われるような記事

・周りにセンスが良いと思われるような記事

・周りに面白いと思われるような記事かつ周りに引かれない記事

・とにかく自分が感動してしまった記事かつ周りにひかれない記事

 

とにかくまわりにどう思われるかが重要。今回の記事は上記の観点で行くとシェアしても1ミリの得もないわけ。DMMなんかもアダルト商品にシェアボタンをもうけていたりするが、めちゃくちゃ売れ筋だったとしてもシェア数が伸びていない(当たり前)。昔↓みたいなニュースもあった。

柏レイソルの増嶋竜也選手が卑猥な動画をFacebook上で共有

このニュースを見てもわかる通り、普通の男はエロ系のシェアには慎重を期する。

 

ただ、シェア数は少なくても、この手の記事はクリックレートが高いので、機会があればどのぐらいアクセスあったか聞いてみたい。はてブとtwitterのコメント欄には 賞賛しかなかったしね。

 

ぐだぐだ書いてきたが、エロはクリックレートが高い。これだけ覚えていただければ満足です。ほんと、男子ってやーね。

 

記事を見に行く

 

ゲームを遊んでみる(PCのみ)

【動作ブラウザ】

IE、Firefox、Safari ※Chromeは不可

 

【準備】

上記ページにて「Unity Web Playerをダウンロード」をクリック、

ダウンロードしたexe、dmgファイルをダブルクリックしてインストール。

ブラウザを再起動してください。

 

【操作方法】

上下キー:前進・後退

左右キー:方向転換

スペースキー:見回しモードの開始・終了

Zキー:カメラズーム

Xキー:カメラズームアウト

3日間うさぎが食べられる雑草とエサのみで生活

3日間ウサギの食べられる雑草とエサのみで生活したら地獄だった話

クライアント:バーグハンバーグバーグ様

掲載メディア:オモコロ

 

気の狂い倒した企画で中国でも話題に

まじで3日間、雑草とうさぎのペレットしか食べなかったため過酷なレポートになっています。400RT以上、はてブ16と少し話題になりました。加えて、

 

中国のサイトで取り上げられる

 

なぜか中国のサイトに取り上げられグローバルな記事に。

 

馬鹿すぎる企画はグローバルになりやすい

今回僕はグローバルにウケようなどと微塵も思っていませんでしたが、馬鹿すぎてシンプルな企画は国境を超えてバズる傾向にあります。ヨッピーさん作の「外国人に日本の馬鹿サイトの感想を聞いたらえらい騒ぎになった件」などはオモコロの記事を翻訳して海外の掲示板に流してみた実験記事ですが、むちゃくちゃアクセスがありオモコロのサーバーが落ちました

 

画像で一目見てわかりやすい&企画がシンプルでユニークだと国境を超えてバズるようです。グローバルにPRしたいなどのご依頼があれば、是非僕に相談してみてください。もう一度同じことをやれるかは分かりませんが。。。

 

この記事を見に行く

 

嫌いな顔を撃墜

嫌いなアイツを撃ち落とせ!enchant.jsを使って簡単にシューティングゲームを作ったった ライティング

クライアント:バーグハンバーグバーグ様

掲載メディア:オモコロ

javascriptゲームエンジン使用で3Dに。カメラ連携も。

javascriptゲームエンジンであるenchant.jsを使用した3Dシューティングゲームです。その場でカメラを使って写真を撮り、撮影した人の顔を敵キャラに埋め込む機能も実装。目の前の人を撃墜する背徳感を味わえます。

 

 

デフォルトの敵の顔をイケダハヤト様に設定

仕様

顔を埋め込まずにプレイを始めると、デフォルトでプロブロガーのイケダハヤト様の顔が埋め込まれる仕様です。スコアは「xxイケダハヤト」と表示されます。名誉毀損で訴えられてもおかしくないため、イケダハヤト様に確認をとらせていただいたところ、

 

イケダさん快諾

快諾でした。信じられない度量の大きさ。おかげでソーシャルで200RT、はてブ16と少し伸びましたが、ちらほらと「イケダハヤト様の株が上がった」旨のコメントをする方がいらっしゃいました。僕もそう思います。

 

 

Twitter連携による拡散の強化

スコア拡散機能

ゲーム感想

 

敵弾や敵に接触した場合のゲームオーバー画面で、撃墜した人のスコアをつぶやける機能を実装いたしました。そのおかげか、タイムラインにイケダハヤト様を撃墜した報告をあげる人が続出いたしました。イケダハヤト様には足を向けて寝られませんが、記事とゲームと連携してソーシャルをうまく活用できました。

 

記事を見に行く