副業Webデザインで仕事を受けるには

副業Webデザインで仕事を受けるためのコラム

 

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

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

 

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

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

 

 

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

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

 

ランサーズLP

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

 

流行りの非平行ヘッダ

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

 

非平行ヘッダ導入例

 

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

 

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

 

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

 

 

レスポンシブデザインによる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アカウントでログイン→メールマガジンの活用)

 

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

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

 

 

koheiito wordpressカスタマイズ

Kohei Ito Design WordPressテンプレート

 

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

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

 

 

記事のランダム表示

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

 

 

レイアウト微修正

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

 

 

サイト全体キャプチャ

koheiito サイト全体

RunRecord LP制作

Run Record ランディングページ

 

初めてのWeb制作

コーディングのみ担当。デザイナーと協力しながら3時間ほどで作成いたしました。テキストが一切なく、画像オンリーの制作依頼でしたが、altタグに概要を入れ込むことで、最低限のSEOを確保いたしました。

 

初めての制作だったので、tableタグでレイアウトを構築すると言う昔のテキストサイト(もしくはhtmlメール)のようなコーディングをやってしまって、今となっては恥ずかしいっす。加えてこの時点ではレスポンシブデザインのスキルを習得していなかったため、接続してきたユーザーエージェントを見てPCじゃなければスマホサイトに飛ばすようなことをやってました。なんという力技。

 

 

サイト全体キャプチャ

runrecordサイト全体

動く東北ずん子

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

 

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

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

 

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

 

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

 

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

 

 

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

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

 

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

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

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

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

 

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

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

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

 

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

 

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

 

記事を見に行く

 

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

【動作ブラウザ】

IE、Firefox、Safari ※Chromeは不可

 

【準備】

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

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

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

 

【操作方法】

上下キー:前進・後退

左右キー:方向転換

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

Zキー:カメラズーム

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

3日間うさぎの餌だけ生活

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

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

掲載メディア:オモコロ

 

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

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

 

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

 

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

 

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

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

 

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

 

この記事を見に行く

 [:en] 

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

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

 

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

 

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

 

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

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

 

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

 

この記事を見に行く

 [:]

嫌いな顔を撃墜

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

 

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

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

 

 

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

仕様

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

 

イケダさん快諾

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

 

 

Twitter連携による拡散の強化

スコア拡散機能

ゲーム感想

 

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

 

記事を見に行く