2017年にぱくたそが行った開発と改善

こんにちは、ぱくたそ開発担当のYuu(@regret_raym)です。

ぱくたそは個人サービスですが、月に1、2回ほど開発日を設けています。

他のサービスに比べると圧倒的に工数が少ないですが、無料サービスなので、現状増やしすぎると運営（おもにすしぱくさん）が死んでしまうので、日々これ実装したら面白いんじゃないかとか、ああしよう、こうしよう、というのを語りながら、開発日にやることを決めています。

2017年の上旬は、創業会社で取締役をやっていた関係で月に1日ほどでしたが、9月にフリーランスとして独立したため、現在は月に2回開発日を設けています。

大体9月以降に開発したものがメインですが、少ない日数でコツコツと、ユーザーの利便性向上、サイト管理者の利便性向上、コラボ企画においての特設サイト展開とわりと頑張ったため、年末ということでまとめてみました。## 画像サイズの種類を増やしました。

「なぜ、ぱくたそにはLとSサイズしかないのか。Mはどうしたんだろう。」

誰にも突っ込まれなかったけど、個人的には気になってたので1600pxサイズのMサイズボタンを追加しました。Sサイズの800pxあれば素材としては利用できるのですが、最近は実案件でも1000px以上での利用も増えてきたので追加しました。

トリミング機能を実装しました

ぱくたその利用ケースは必ずしもWebサイト制作だけではなく、勉強会での発表資料や動画のサムネイル、ゲーム、ニュースやブログ記事、テレビでの利用などデザイナーではない人が使っているケースが多いです。

で、そんななか全員がPhotoshopなどの編集ツールを自由に使いこなせるわけでもないので、もっと気軽に使えるようにするため、トリミング機能を実装しました。簡易的なツールなので細かくは難しいですが、ちょっとしたときの利用に便利なんじゃないかなーと。

お気に入り機能を実装

見つけた素材をタブで開くもしくは都度ダウンロードするのではなく、一時的にブラウザ上に保存できる機能です。よくECサイトとかにあるやつですね。

写真素材ページでハートを押すと、お気に入り一覧画面に表示されます。ハート押したときにインタラクションな動きも地味に仕込まれています。これについては機能、デザイン面で改良は加えていくので、今後にご期待下さい。

クオリティの高い写真素材をまとめたセレクションを公開しました

カテゴリとタグ、そしてフリーワードを軸にした検索って自分に明確な探したいものがある人であれば使いやすいんですよね。ただ、なんとなくスライドで使いたい、キレイな写真ないかなとふんわりしたイメージで探す人も多いハズ。

セレクションでは、厳選した写真と合わせて、この写真に関連する撮影秘話、この写真を撮影したカメラマン、写真に使われているタグも見ることが出来るので、好きな系統の写真からカメラマンや単語を知ることが出来ます。

ただ、1ページごとに、全部の写真やブログ記事入力するのはきついので、カスタムフィールドを1つ用意して、そこに選んだ写真IDだけ入れてもらうことで、自動的にページ内容が生成されるようにしています。

検索ワードによる結果表示の精度向上

「川」で検索すると大川さんがでてくるのでどうにかしてほしい。

とユーザーからお問い合わせがあったので、どうにかしてみました。これは大川さんに限らず、人名・地名も影響してしまうため、たとえば、川で検索したとき、大川という人名もでるし、谷川岳という山写真も出てしまいます。ここについてはAIによる検索システムを使っているわけではないので人力で工夫しています。

静的サイトなので、JavaScriptで頑張る所存。

検索結果に関連タグ表示

検索したときより絞りこみ検索しやすいようにタグを表示しました。表示されているキーワード・写真に対しての関連タグがでるため、探してるときに気に入った写真が見つからない場合にタグをクリックするだけで移動できるようにするためです。

検索もう一回入力するの面倒ですしね。

管理者の利便性向上

ここからはすしぱくさんの負担軽減です。2017年は1日の写真更新枚数を5枚だったのを20枚にしています。そのため、撮影、現像・レタッチ、写真の投稿まで含めると相当時間がかかります。なので、投稿部分に関してまず効率化できるようにしました。

画像を解析してタグを自動出力する

すしぱくさんがヘルニアで入院していたので代わりに更新していた時期があったんですが、写真を見てタグを考えるのは難しいです。直感によるキーワードを入れても、過去に似たような写真があった場合、それと関連できているのかどうか、また、過不足がないかどうか。

最近はAIでの画像解析も進んで、さらにそれをAPIで提供してくれているサービスも増えたのでこちらを利用しました。管理画面で画像をアップすると、その画像に関連するキーワードが表示され挿入できるようにしています。

掲載している写真情報を検索できる支援ツール

新規写真を投稿する際に、重複を避けるためにも過去に掲載した写真を参考にタイトルやタグ情報を入力する必要があります。また、お問い合わせや不正利用における際の対象写真の検索、コラボやセレクションなど特定ページにおける写真情報の抽出など管理的な用途として検索ツールを作成しました。

前述したタグの自動出力も、これと合わせることで、過去に掲載した投稿情報と比較して挿入できるようになっています。

自主企画においての特設サイト

自治体や企業コラボではなく、ぱくたその自主企画で作ったサイトです。 ちなみに、コラボページ少しデザイン変えてみたんですが、コラボのお問い合わせ増えたらしいのでこういう手入れも大事だなぁと。

LGTM

エンジニアにしか分からないLGTMネタ。段田さんがフリー素材モデルデビューするにあたって、段田さんの動きを動画で撮影してそれをGifにしています。

LGTMとはコードなどを書いてレビューしてもらって、そのレビューによっての修正などが終わった後に、レビューした人が「僕はこれでいいと思うよ！」という意思を伝えるために、喜ばれそうな画像を貼る文化です。

LGTM画像を配布するサイトはあるんですが、そちらが著作権的に駄目な感じの画像で溢れていたので、ぱくたそで堂々と使えるやつを用意しようと思ったのがきっかけです。コピーボタン押すとマークダウンでコピーできるので、Githubなどにそのまま貼り付けられます。高負荷対策で念のためのCDNにも対応しています。

平湯温泉

厳冬期の上高地、平湯温泉、飛騨で撮影、そして標高3,000mの登山道整備に参加するとは思わなかった企画。まず、単純に山装備を揃える難易度がめっちゃ高かった。都内ショップで登山靴を買おうとどれがいいか質問したら、「いやーその靴じゃ寒いですよ」で会話が終わり売る気がなさそうな気配、別の店ではサイズが合わなくて痛いんですけどっていったら「慣れですね」と言われる。結局メーカーの公式ショップいって丁寧に対応してもらえたので公式万歳でした。

平湯温泉って、温泉が源泉かけ流しで24時間入れるし、温泉宿がたくさんあるので泊まって無くても別の温泉入れるし、飛騨牛食べれるし、1泊ご飯つきで10,000円〜13,000円とか安いし、で、行った感想としては最高だったんですが、そもそも平湯温泉はどこにあるのか、どうやっていくのか、遊ぶ場所あるのか、というのがわからなかったので、ぱくたその特設ページで動画と合わせて紹介しています。

施策で失敗したやつ

最後に施策で失敗したものを。

Amazon CloudFront

ぱくたそって重いよねという意見がちらほらあるので、AWSのCloudFrontを導入したら、1日で無料枠使い切って赤字で死にました。月間トラフィック量が150Tと多すぎたのが敗因です。フロント部分というより画像の最適化が必要なので、来年は別方法で軽量化を目指します。

まとめ

そんなわけで、ぱくたそではサイトの改善もやりつつ、企画にあわせて、撮影（スチール、ドローンによる空撮、動画）、コンテンツの更新展開など色々やっているので興味ある方はご連絡ください。あと見たとか使ってるよーという意見聞くだけでも僕はやる気があがります。

2018年もよろしくお願いします。