PM初心者の研修記録#5 【モック制作】モックの作り方と注意することをわかりやすく解説!

contents
  1. モック制作
  2.  注意したこと
  3.  意識したこと
  4. 実現可能かどうかも検討!

1.モック制作

サイトを作る前の下準備として必要なのは、モック作成
モック#3サービス開発の企画ってどんなことをするの?で勉強しましたね!

MoC(モック)とは、モックアップの省略表現で、完成後に実際に表示される状態を模した実物そっくりの画像や画面などのこと。です!

それでは、実際に作りたいサイトをイメージしてモックを作ってみましょう〜

モック例
モック例

今回の制作は、既にあるサイトを引用して作ってみました!(ジョジョの奇妙な冒険キャラ診断
どこを押したらどこに飛ぶかまで正確に表現していくよ!

2.注意したこと

  • 著作権の理由でサイトに掲載していい画像とそうでない画像に注意する。
    • 写真をあげているサイトのガイドラインを確認して、商用利用可能か、何枚まで使用可能かを確認する!
      <商用利用可能なフリーイラスト>
    • 禁止事項に直リンク禁止と書いてあったら、”画像を右クリックして出てくるリンクを直接サイトに貼り付けることを禁止している”という意味らしい!(直接リンクを貼って画像を表示させたら、素材サイトのサーバーに直接アクセスして画像を呼び出すことになり、サーバーに負荷がかかるから禁止されている、、、。気をつけよう!)

3.意識したこと

  • サイトを開いた時のイメージをそのままに作成する。
    • 本来のサイトをイメージするので、サイトにあるタブの中に入れたい名前や、ヘッター、フッターも作っていくよ!
  • どのボタンを押したらどのページへ飛ぶのかもわかるようにする。
    •  今回は心理テストのサイトなので、各解答ボタンを押した後に飛びページをそれぞれ作った!
 

4.実現可能かどうかも検討!

サイトを作る前に、本当にそのサイトが作れるのか検討するのも重要らしいです!

今回のサイトを作る前のアイディア出しで、私は『Instagram、Twitter、TikTokから全部の動画や画像を一つに集めるサイト』を作りたいと社内で発言しましたが、却下されました(泣)

IT業界に長くいらっしゃるベテランさんにはすぐにお分かりだと思うのですが、実現可能かどうか考える要素として、

  • Instagram、Twitter、TikTokの検索結果情報を取得するAPI が公開されているか

が重要なポイントだそうです! 

  • もしAPI が公開されていたとしても、それが永続的に使えるわけではない!?
    • SNS系の経営方針として、最初はSNS宣伝のためにAPIが公開され利用できるが、SNS自体が人気になると、APIを廃止したり、有料APIにしていく傾向がある。
    • Instagram、Twitterは数年前からその流れが激しく、APIが使えなくなってきている。

このような理由で、実現が難しいサイトだと判断されたようでした!
(APIについては後ほど解説します。)

API公開しないイラスト
次回は
全体の構成をどうやって考えたのか説明していくよ!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です