記事一括投稿ツールの開発 WordPressプラグイン

記事一括投稿ツールの開発 WordPressプラグイン

クライアント:非公開

 

規定のテンプレートに従い一括で記事投稿

WordPressに数千件単位で一気に記事を投稿できるプラグインを開発しました。

テンプレートの設定も可能で、テンプレートに従い各種データをCSVで用意することで、記事を追加・更新できます。

2人日程度で完成しました。

 

決まったテンプレートで複数のライターに記事を書いてもらったり、既存のエクセルデータなどから一括でコンテンツを作成するのに威力を発揮します。

 

WordPressのプラグインやテーマカスタマイズについてご相談のある方は こちらからお問い合わせください。

SNSシェア用 アイキャッチ バナー画像製作 天候変更

クライアント:なし

掲載サイト:本サイト

 

TwitterやFacebookでリンクをシェアした際に表示される、バナー画像を制作いたしました。

制作過程をざっくり紹介いたします。

 

完成図はこちら

バナー制作完成図

 

コンセプト

  • 札幌であることが分かる
  • Photoshop加工してる感を出す
  • Tokyo Jungleをモチーフに、動物が厳しい都会の自然で生きてる感を出す
  • 自分が楽しいこと

TOKYO JUNGLEと言う、もしも都会から人間がいなくなって、動物だけになった東京がジャングル化したら。みたいなサバイバルアクションゲームがあります。僕はこのゲームが本当に好きでして。

ウサギなどの弱い草食獣が、ライオンやワニやらの強力肉食獣の影に怯えつつ、地下道の毒水をすすり、何十年も自分の子孫を残す様。光化学スモッグや大雨や酷暑と言う、東京ならではの自然の猛威に晒されながらも必死に生きる有様は、自分でプレイしているにも関わらず泣きそうになります。

パッケージデザインは下記のような感じ。

TOKYO JUNGLE パッケージデザイン

Amazon

クールですよね。

荒れはてた渋谷にポメラニアンがポツンですよ。これほどキャッチーでクールなパッケージデザインがありますかね?

 

で、俺がこのゲームで好きなのは天候が厳しくなればなるほど、生き延びることが困難な点。特に大雨かつ光化学スモッグが発生してるみたいな無茶苦茶な天候だと歩いてるだけで死ぬので、こう、すっごいゾクゾクするんです。

今回は、TOKYO JUNGLEの札幌編があったとして、大雨かつ光化学スモッグの中、ホーランドロップがポツンと道庁にいるという絵を表現してみます。

 

制作過程

道庁を用意する

 

雷を用意する

 

道庁と雷を合成する

 

ウサギを配置する

自宅で飼っているウサギです。あとで上のレイヤーに光化学スモッグやら大雨やらが入るので、かなり適当に切り抜いてます(笑)

 

光化学スモッグ、大雨を作成する

 

TOKYO JUNGLEに似たフォントでタイトルを入れる

 

バナー制作のご依頼があればお気軽に

このレベルであれば2時間ぐらいで終わりますので値段もお手軽です。何かございましたらお問い合わせフォームからお気軽にご連絡ください。

 

LikeRoute ~観光地探訪型ブラウザーゲーム~

観光地探訪型ブラウザーゲーム サイト制作

クライアント:DESVIO様

サイト:LikeRoute ~観光地探訪型ブラウザーゲーム~

 

観光地をオリジナルキャラクターと共に巡るアドベンチャーゲームプレイサイトを制作。

 

担当範囲

  • Webサイトデザイン
  • Webサイトコーディング
  • Twitterアカウント運営
  • WordPress構築
  • ゲームエンジン ティラノスクリプトをWordpress上で動作可能に

 

ティラノスクリプトをWordpress上で動作可能に

アドベンチャーゲームに使用されるティラノスクリプト をWordpress上で動作させるように改造しました。

WordPress上で動くようになったことで、ログイン管理や課金、アーカイブ機能など、一般的なゲームに必要な各種機能の実装が容易となりました。無論、Wordpressだけでなく、cakePHP3やRailsなど別のPHPフレームワークなどにも適用可能かと思います。

PHPフレームワーク上でティラノスクリプト を動作させるtipsは世に出回っていないため、時間があればまとめたいと思います。

 

サイトデザイン

LikeRouteデザインカンプ

 

WordPressやその他PHPフレームワークにティラノスクリプト を搭載したい方がいらっしゃいましたら

こちらからお問い合わせください。

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

名古屋ギターフェスティバル 2018 サイト制作

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

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

 

下記案件の継続お仕事です。

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

 

担当範囲

  • サイトカラーの変更
  • 2017の記事と2018の記事を分離
  • SSL化
  • 各種情報 微修正

 

サイト効果

「名古屋 ギター」などの地域+ギター関連のキーワード、および出演者の名前の検索で上位表示させることに成功。主催の生田様に積極的に記事更新をしていただいたおかげ&担当デザイナーとの物販コラボ企画で認知度が2017年より大きく上がり、「名古屋ギターフェスティバル」というイベント名直での検索アクセスが激増した。

 

1年に1回のイベントサイトにしては1ページあたりのPVも高く、着実にブランド力が上がっている。(これはサイトの力というより、生田様の記事とSNSでの発信力、担当デザイナーの力が大きい)

 

サイトデザイン

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

 

rms apiサンプル作成&記事執筆

RMS APIのPHPサンプル作成、まとめ記事

クライアント:非公開

サイト:楽天 RMS APIのPHPサンプル集・使い方 ほぼ全パターン(随時更新中)

ソースコード:https://github.com/yheihei/rms-api-sample

 

PHPプログラミング&Webライティングのお仕事です。

 

RMS API系の開発で困っている開発者の助けに

RMS APIとは楽天市場の商品をプログラムから操作するWeb APIです。

仕様書は一般には公開されておらず、仕様書も難解で開発難易度が高いです。

サンプルソースコードもJavaのみ少しだけあるという状態で、検索してもほとんど有用な情報は得られません。

 

特にPHPのサンプルは情報が少なく、受注APIを記載したブログが少しだけあるという状態。

せっかくの便利なAPIもこれでは開発者が増えないので問題です。

 

今回は、RMS APIのほとんど全てのAPIのサンプルをPHPで作成し、記事で解説するという形をとりました。

 

RMS API系のキーワードで公式を上回る順位を獲得

キーワードツールを用いて、キーワードを元に網羅的に記事とサンプルを作成。まとめ記事1本を軸に、詳細解説記事を数本内部リンクさせることで、サイト全体としてRMS APIの解説への検索価値をあげることを目標としました。

 

結果、

rms api の検索順位

RMS系のAPIに関連する検索クエリで公式よりも上位表示させることに成功しました。

ソースコードを保存しているgithubにも、数件スターがついており、RMS APIを使う多くの開発者に貢献できたと考えています。

 

RMS API系の開発や記事執筆依頼がありましたら、こちらからお問い合わせください。

 

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

アールズ株式会社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連携による拡散の強化

スコア拡散機能

ゲーム感想

 

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

 

記事を見に行く