thanks2music / revenge Goto Github PK

概要

• 後から公開される情報があるので、必然的に「追記」する形の記事が多数ある
• ピックアップ に持っていくとピックアップ一覧があふれかえるので、「最近編集した記事」のようなセクションを設けたい

目的

• 「最近編集したんだよ」「更新情報あるよ」という事をユーザーに伝えたい

デザイン案1

UXMILK

• 新着記事
• 更新記事

のようにタブ分けしちゃう

概要

• single_photoswipeを入れている amp-lightboxの画像対比が正しく設定出来ていない

こうしたい

• 677x1000 の画像が 1280x905 のwidth/height属性が設定されているので、 677x1000が入るようにする

おそらく

正規表現でゴニョゴニョした部分に漏れがある

スクリーンショット

参考サービス

https://wovn.io/ja/
https://www.gio-cubic.co.jp/shutto/

サービス比較

https://www.gio-cubic.co.jp/topics/translater/

フィードバックフォーム

自前実装編

https://support.nintendo.co.jp/app/ask_opinion

https://www.dropbox.com/

Cookpad

Sony PlayStation
https://www.jp.playstation.com/expj/pscom/index.html?hfclick=FTR_feedback

サクッとGoogleフォーム編

内容が参考になる

参考

kai-you

animatetimes

natalie

概要 (目的)

• 開催期間別一覧ページが 0.17% しか見られておらず、目的が伝わっていない可能性があるので修正する

修正内容

• もうすぐ終了、ではなく、 「もうすぐ開催！」 に変更する
• トップページが長くなっている原因なので、トップページからも外す

概要

• 検索時にカテゴリが表示出来ておらず「PICKUP」という表示になっているのをカテゴリ名を表示させる

目的

• UXの向上

こうしたい

• 検索した記事のカテゴリ名を表示する

• 住所入力が無かった場合のデザインを修正する
• 複数箇所の地図表示を出来るようにする
• 既存の記事に影響が無いようにする

目的

• 「開催中」なのか「開催予定」なのか日付で並んでいる記事一覧では把握しづらい
• パット見で開催中か開催予定かを分かるようにしたい
• #38 の件もあり、わかりやすくしたい

こうしたい

• 開催中一覧 と 開催予定一覧 を作る
• 開催中 にはバッジのような物をつける
  • そうなると 開催終了 や 開催予定 も必要になってきそう

スクリーンショット

• ...

参考URL

• ...

詳細は後で書く

参考

• アニメハック

SS

参考

• https://www.gesource.jp/weblog/?p=6643

参考

前へ・次へ自体を無くすパターン

KAI-YOU

animatetimes 割り切る

natalie いっぱい

概要

• ...

目的

• ...

こうしたい

• ...

スクリーンショット

• ...

参考URL

• ...

概要

• 企業向けに広告案内ページを作成する

• トップページが一番PVある
• ついで2ページ目、3ページ目、SEOが高いページとなる

概要

• 未完 ( mikan ) ページの詳細が発表された時に自ら調べなくても気づける仕組みを導入したい

目的

• 詳細発表されたことに気づかず、アクセスが増えた事で気づく時がありユーザーの体験を損ねている

アイデア

• アイデア1: /mikan/ ページにスクレイピングして開催日近くなったらSlackを送る
• アイデア2: 記事公開時に mikan タグがある場合はGoogleスプレッドシートに追加する
  • スプレッドシートのGASで、開催日近くなったらSlackに通知を送る

これにしよ
https://github.com/callmecavs/layzr.js

概要

• 他記事へのリンクに ?amp=1 をつける

目的

• AMP→通常ページの遷移だと体感が悪いので、AMP→AMPにして体感を向上させたい

概要(理想)

• 詳細が発表された記事をユーザーにリマインドする
• あるいは、開催機嫌が近くなった記事をユーザーにリマインドする
• リマインドされるかされないかは設定で変更出来る
• メール配信設定

目的

• ...

こうしたい

• ...

スクリーンショット

• ...

参考URL

• ...

概要

• ...

目的

• ...

こうしたい

• ...

スクリーンショット

• ...

参考URL

• ...

概要

• Document: amp-youtube
• Document: amp-iframe

目的

• PV/MVなどの紹介にYoutubeを使っているページでエラーが発生しているので修正する

スクリーンショット

sr-only

https://v4-alpha.getbootstrap.com/getting-started/accessibility/

Related #18

概要

• ギャラリーのサムネイル画像(Masonryを使っている箇所)が崩れているので修正する

スクリーンショット

概要

• ピックアップしている記事が多すぎて (10個〜) カルーセルが使いづらいので改善したい
• カルーセルをやめるか、違うUIで表現する
• ピックアップを減らす

こうしたい

任天堂みたいなカルーセル(?) にしたい

https://www.nintendo.co.jp/
https://www.nintendo.co.jp/hardware/switch/index.html

https://www.nintendo.co.jp/software/switch/index.html

https://www.nintendo.co.jp/software/3ds/index.html

概要

• Google Maps JavaScript APIがGCPですごく高いのでEmbed APIで表示させる

https://cloud.google.com/maps-platform/pricing/sheet/?hl=JA

概要

• 更新してないので更新する

要件

• 月単位でイベント一覧を網羅的に把握出来るスケジュールページを作りたい
  • (実装後、週単位なども切り替えられるようにしたいが、まずは月単位のみ)

Sample

Google.io

https://events.google.com/io/schedule/?section=may-8

カレンダータイプ

http://anime.eiga.com/event/

デザインは後で

概要

連絡をいただける広告代理店さんが増えてきたので広告サービスの内容を調査して、使うにしろお断りするにしろ仕様を確認する

目的

• revenge にマッチしているか把握したい
• メールなどで1回1回やり取りする時間のコストが高いので精査する

メモ

セプテーニ・クロスゲート

• https://www.cgate.jp/

ユナイテッドブレイズ

• http://www.unitedblades.co.jp/

マッスルメディア

• http://musclemedia.jp/

Nend

• http://nend.net/

SeedApp

• https://seedapp.jp/

概要

• SP Viewではアイコンに変更
• AMP Viewではamp-snsに対応する
• PC Viewではレスポンシブでサイドバーに表示する

SP Viewではアイコンに変更

AMP Viewではamp-snsに対応する

Document

• https://amp.dev/ja/documentation/components/amp-social-share/
• 日本語解説 https://syncer.jp/Web/AMP/Component/amp-social-share/

PC Viewではレスポンシブで

LIG

ferret

目的

• アナリティクスを見るとトップページについで /page/2 や /page/3 などのページネーションページが着ており、ユーザーが「見たい情報が無くて探している」時間が多い印象
• トップページからでも「人気作品」やユーザーが好きでだろう作品の記事に飛びやすくしたい

こうしたい

• 「大人気作品」のようなカテゴリあるいはタブを設けその作品に飛べるようにする
• 「推している作品」のようなカテゴリあるいはタブを設けその作品に飛べるようにする

スクリーンショット例

参考URL

• https://nijimen.net/

概要

• サイトに「ライター様募集ページ」を作成する

目的

• デザイン・実装・執筆・SNS運営・情報収集などなど色々あって手が回らないので、安定して執筆してくれるライターさんを雇いたい
• 熱量ある人を雇いたいので、ランサーズやクラウドワークスでも良いのだが、まずら自サイトに掲載して募集が来るか様子を見る
  • 募集なければクラウドワークスやランサーズを検討する

こうしたい

• ...あとで

スクリーンショット

• ...

参考URL

• アニメ！アニメ！ https://s.animeanime.jp/article/2018/05/15/37764.html
• あにぶ https://anibu.jp/recruit
• animate times https://www.animatetimes.com/news/details.php?id=1518155751

概要

• #48 で見送ったAMP修正を行う

目的

• UI/UXを向上させたい

こうしたい

• amp-form の実装
  • 仕様 https://ampbyexample.com/components/amp-form/
  • 紹介記事 https://www.mitsue.co.jp/knowledge/blog/frontend/201708/29_1526.html
• photoswipe要素に対して amp-image-lightbox を実装する
  • 仕様 https://www.ampproject.org/docs/reference/components/amp-image-lightbox

概要

• ユーザーのお問い合わせ
• カフェ店舗のお問い合わせ
• 広告主のお問い合わせ

詳細

• 何を見て問い合わせているか必須にする
• プレスリリース、掲載依頼、通常の問い合わせでフォーム分ける

レイアウト

• 1カラムにする

概要

• 現状はカテゴリページにアクセスすると 「その記事一覧が表示される」 のみだが、
• タクソノミー(Category)情報を元に作品自体の紹介ページとしての情報も表示させたい

こうしたいアイディア

• カテゴリにカスタムフィールドを持たせる
  • 公式サイト
  • OnAir / 放送枠
  • 声優さん
  • キャスト
• カテゴリページを見た時にこれらの情報が見られる

Memo

記事一覧の上部に作品概要があるイメージ

概要

何も考えずにデフォルトで選べる内容をスマホのGナビに追加していたが、きちんとメニューの内容を考えて入れたい。

目的

• ユーザーが「見たい」情報にたどり着きやすくしたい
• 回遊して「見てもらう」事が本題のサイトなので、メニューコンテンツは色々盛り込む
  • 色々あっても「見やすいデザイン」にしたい
• アナリティクスで確認
  • Gナビ表示後、ユーザーは何を押しているか？を確認したい

デザインサンプル

任天堂共通メニュー

アニメイトタイムズ

マリオの紹介ページ

概要

• Geolocation API を使用し記事を出し分ける

目的

• 関西の人には関西の記事を、九州の人には九州の記事を優先的に表示させたい
• 優先するものがなかった場合は通常表示する

スクリーンショット

• ...

参考URL

• https://qiita.com/akkey2475/items/81f4f94f17bfe5c7ce42
• https://syncer.jp/how-to-use-geolocation-api

概要

• スマートフォンViewかつ記事ページの場合、AMPの仕様に対応する

デバッグ

• ?amp=1#development=1 をつけてページを表示させるとAMPのvalidator.jsがエラーを表示する

TODO

Markup

• AMP/通常を振り分ける
• 必須マークアップを組み込む
• onclick 属性がついている要素は属性を削除する
• [ ] target 属性がついている要素は属性を削除する 必要かと思ったがエラーにならないので様子見
• CSSを50kb以下にする

記事

• PhotoSwipeのエラーはプラグイン側で修正
  • Uncaught ReferenceError: imagesLoaded is not defined
• AMP用にメニュー内の記事一覧やフッターなど不要部分は表示させない
• AdsenseなどのJavaScriptは一括して amp adタグ に差し替える
  • Adsense https://support.google.com/adsense/answer/7183212?hl=ja&utm_source=aso&utm_medium=link&utm_campaign=ww-ww-et-asfe_
  • nend https://www.nend.net/m/adspot

今回はやらない

• Form要素は amp-form で表示させる必要があるが、今回はform要素を取る
  • https://www.ampproject.org/docs/reference/components/amp-form

参考

公式ドキュメント
https://www.ampproject.org/docs/reference/

プラグイン無しでAMP化
https://q-az.net/amp-wordpress-without-plugin/
https://creatorclip.info/2016/02/wordpress-accelerated-mobile-pages/

参考

• https://goodpatch.com/blog/food_and_design/

SS

優先的に読ませたい

PCだと抜粋を入れ忘れるとエラーになってしまうのでならないようにする

目的

• 崩れないようにする

概要

• ads.jsが複数呼ばれているので1つにする
• document.write が遅いので高速化する

こうしたい

• adsはfuncitonから1回読むようにする
• document.writeは $function() 後に良い感じにする

参考URL

• http://d.hatena.ne.jp/tsugehara/20121214/1355482262
• https://support.google.com/adsense/forum/AAAA2p7CQ48KRCuIhPyLD8/?hl=ja
• https://support.google.com/adsense/answer/3221666?hl=ja

概要

• 古に書いた記事が、記事内にJavaScriptがあったりおそらく不要な属性があったりしてAMPエラーになっているのでDB置換を行う

置換対象ピックアップ

• 記事中にJavaScriptがある
• 記事内の amp-img に width / height が入っていない (正規表現に漏れがある?)
• 記事内に iframe がある
• 記事内の要素に style="" 属性がある

概要

• 開催日順が記事オーダーが分かりづらい

目的

• 開催日順ページを使いやすくしたい

こうしたい

• 「その月に終わるイベント」
• 「その月から始まるイベント」

• 直近で終わるのが早いのから )?)

のみ表示させるようにしたい

スクリーンショット

• ...

参考URL

概要

• トップページが長い