各種制作については、下記のようなフローで進行していきます。
制作物によって進め方は異なりますが、「どんな作品にしたいか」「どんな風にユーザに感じてもらいたいか」などの会話（ミーティング）を多く行うことが特徴です。そのほか、チーム全員がウェブ解析の資格を取得しており、独自のテスト基準を用いたチェックも実施しています。
解析からはじまる
制作スタイル
BecreのWeb サイトやアプリ制作での大きな特徴は「データ解析」をベースとした制作スタイルにあります。
ウェブ解析士協会による「ウェブ解析士資格」を取得/更新し、制作前の「キックオフミーティング」や「設計」の段階で、
検索性と回遊性を検討しています。公開後のサポートや解析も対応可能です。
-
見積り依頼
本サイトの「見積り・お問い合わせ」ページから簡単にオーダーできます。まずは一度お問い合わせいただき、「どんなものを作りたいか」を簡単で構いませんのでお伝えください。 -
コンセプトミーティング
本サイトの「見積り・お問い合わせ」ページから簡単にオーダーできます。まずは一度お問い合わせいただき、「どんなものを作りたいか」を簡単で構いませんのでお伝えください。 -
発注
コンセプトミーティング後に、正確なお見積りを発行します。同時に「注文書」が発行されるので、注文書の提出をもって発注完了となります。 -
キックオフミーティング
いよいよ制作開始です。ディレクター、デザイナー、コーダーの３名が参加し、両社にてデザイン、構成、機能、ターゲット、スケジュールについて協議します。 -
設計・ワイヤー制作
サイトのワイヤー（どこにどんな要素が配置されるかの略図）を制作し、同時に設計における仕様書を制作します。ワイヤーを用いて、構成に乖離がないか確認していきます。 -
マテリアル制作
TOPと下層ページのデザインイメージを制作します。まずは２ページ分をサンプルとして制作することで、イメージに乖離がないか確認していきます。 -
デザイン
マテリアルが固まった後、すべてのページのデザインに取り掛かります。どんなデザインに仕上がるか是非楽しみにお待ちください。 -
コーディング
デザイン完了後、内容をご確認いただき、次はコーディング（プログラムを書くこと）に取り掛かります。機能面だけでなく、ユーザを楽しませる「動き」も取り入れていきます。 -
サーバ構築
Webサイトを納品するための置き場所となるサーバの設定、もしくは新規構築を行います。旧サイトが存在する場合は念のため「バックアップ」を取りますのでご安心ください。 -
テスト
ステージング環境と呼ばれる擬似環境で、下記「テスト基準について」の項目ごとに、テストを実施します。一部項目についてはオプション項目となり、ご要望があれば内容を追加することも可能です。 -
公開
テストおよび、両社の確認が完了しましたら、ステージング環境のデータを本番環境へ移行することで公開となります。公開後も一部のテストを再度実施し、エラーなどの確認を行います。
テスト基準について
| 端末表示確認 | Windows 11 - Edge | Windows 11 - Google Chrome | Windows 11 - Firefox |
|---|---|---|---|
| Windows 10 - Edge | Windows 10 - Google Chrome | Windows 10 - Firefox | |
| MacOS Monterey - safari | MacOS Monterey - Google Chrome | MacOS Monterey - Firefox | |
| MacOS Big Sur - safari | MacOS Big Sur - Google Chrome | MacOS Big Sur - Firefox | |
| 仮想端末表示確認 ※AndroidもしくはiOSの画面サイズを PC上で仮想表示させ、確認するものです |
Android（360x640） | Android（360x720） | Android（800x1280） |
| iOS（375x667） | iOS（414x896） | iOS（375x812） | |
| iOS（414x736） | iOS（390x844） | iOS（414x780） | |
| iOS（768x1024） | iOS（834x1112） | iOS（1024x1366） | |
| head - meta | titleが重複なく、適切に設定されている | OGPが設定されている | GA / GTM タグが設定されている |
| description（70-90文字程度）が設定されている | favicon / apple-touch-icon が設定されている | canonicalが設定されている | |
| コンテンツ | ページレイアウトは正しく表示されている | マウスオーバーの挙動が適切に設定されている | h1が設定されている |
| h1もしくはh2（ページの最上位になるもの）にはサイトリンクとして表示されて良いテキストのみが設定されている | imgにaltが設定されている | classが適切に命名され、設定されている | |
| フォントは相対値で設定されている | printCSSが適切に設定されている | テキストは全てcopy-pasteで対応している | |
| 全ての画像が軽量化されている | ブレイクポイントが適切に設定されている（見切れて操作不能となることもない） | デベロッパーツール上でのLoad速度を計測し、既存サイトとの比較を行っている | |
| リンク切れが残っていない | HTMLやCSSに不要な記述（ダミー）、コメントアウトが残っていない | 不要なCSS、JavaScriptは読み込まれていない | |
| ガタつき、読み込み遅延は発生していない | 実装したJavaScriptライブラリ（またはフレームワーク）が使用できない環境がないかを調査し、対応している | デベロッパーツール上での致命的なエラー検出はない | |
| form | 必須入力要素は適切に設定されている | 短文長文入力がある場合に適切に通知されている | 全半角/数字/アルファベット等、項目ごとに適切に入力制限が設定されている |
| 入力エラーの内容が、理解しやすい形で表示されている | 個人情報保護方針への同意が設定されている | 入力確認画面が適切に設定され、入力内容と相違なく表示されている | |
| 確認画面から入力画面に戻った場合、入力内容が保持されている | 送信完了画面が設定されている（URLは入力時とは別URLになっている） | 送信完了画面のリロードが発生した場合、重複してメールが送られないよう、設定されている | |
| 送信完了画面以降の導線が設定されている | 送信内容が入力内容と相違なく、全ての送信先へ送られている | 自動返信メールの内容は、支給された原稿に設定されている | |
| 送信者側に自動返信メールが問題なく送信されている | 送信先と自動返信両方で、送信内容および件名に不要な要素が入っていない | SSLによる暗号化が設定されている | |
| CMS | バージョンが最新（もしくはサポート範囲内）である | 自動アップデートが停止されている | 画像のEXIF情報が削除されている |
| 認証パスワードが複雑なものになっている | カテゴリ、投稿ごとに適切な順番で表示されている | 投稿画面上で不要な項目は非表示になっている | |
| 投稿時のエディタ切り替えによるレイアウト崩れは発生しない | パンくずリストが設定されている | 利用プラグインのライセンス元、およびライセンス料について確認している | |
| プラグインのバージョンが最新（もしくはサポート範囲内）になっている | 不要なプラグインを全て削除している | 既存サイトのファイル、データベースのバックアップを取得し、規定ドライブへ格納している | |
| サーバ | データベース（MySQL）のバージョンが最新（もしくはサポート範囲内）である | PHPのバージョンが最新（もしくはサポート範囲内）である | htaccess上でキャッシュ処理が設定されている |
| htaccess上で旧サイトから新サイトへのリダイレクト設定がされている | 404 Not Found ページが設定されている | robots.txtが設定されている | |
| サーバ情報が規定管理下で管理されている | 各種ファイルにパーミッションを設定し規定管理下で管理されている | SSLによる暗号化が設定されている | |
| マニュアル | 公開手順が規定管理下にまとめられている | 操作手順マニュアルを制作している | − |
| ディレクション | Web案件管理シートを確認し、「未着手」タスクがない | CMSにおける脆弱性についての説明をしている | 共存する「他の既存サイト」への影響を事前に調査している |
| 公開対応時の作業内容と「既存サイト」への影響を事前に調査し、伝えている | 自身のPC、SPでの表示確認を行い、社内承認を受けている | コーダーチェックで上がってきたバグやエラーについて確認、対応指示をしている | |
| デザイン | デザイン時の想定通りにデザインが組み込まれている（フォント、パーツ、マージン等） | − | − |
総務省miCheckerに対応
総務省が提供している「みんなのアクセシビリティ評価ツール：miChecker」について、追加対応が可能です。こちらは、ウェブコンテンツに基づくアクセシビリティ検証を目的としたツールになります。ご希望の場合はご相談ください。
-
見積り依頼
本サイトの「見積り・お問い合わせ」ページから簡単にオーダーできます。まずは一度お問い合わせいただき、解析やSEO面で「どんなところに困っているか」を簡単で構いませんのでお伝えください。 -
ミーティング
解析やSEOでの相談内容についてのヒアリングをZOOM等のオンライン通話ツール、もしくは直接お伺いしてご確認させていただきます。対応にあたっての疑問点やご要望をお伝えください。 -
解析の発注
ミーティング後に、まずは解析についての正確なお見積りを発行します。同時に「注文書」が発行されるので、注文書の提出をもって発注完了となります。 -
状況確認
ご相談の内容に応じて、まずは既存の「Googleアナリティクス」を確認させていただきます。Googleアナリティクスなどの解析ツールが導入されていない場合は、まずは導入から実施します。 -
レポート制作
Googleアナリティクスのデータを「Googleデータポータル」に連携させ、オリジナルのレポートを制作します。その後、レポートについての解説および今後の課題点と改修ポイントについてご説明します。 -
SEO対策の発注
レポートの解説後、対応可能なSEO対策についての正確なお見積りを発行します。同時に「注文書」が発行されるので、注文書の提出をもって発注完了となります。 -
サイト改修
基本的には、Webサイトの設計見直しを実施します。例えばmeta情報やマークアップの見直し、クローラビリティの最適化（Googleサーチコンソールとの連携）、ディスクリプションの再検討などです。 -
解析と対策を継続
上記のSEO対策後、定期的にレポートの解説および対策の見直しを繰り返します。このように二人三脚で対策を繰り返していくことで、検索数やコンバージョンの増加に繋げていきます。
-
見積り依頼
本サイトの「見積り・お問い合わせ」ページから簡単にオーダーできます。まずは一度お問い合わせいただき、「どんなものを作りたいか」を簡単で構いませんのでお伝えください。 -
コンセプトミーティング
制作物の内容についてのヒアリングをZOOM等のオンライン通話ツール、もしくは直接お伺いしてご確認させていただきます。制作にあたっての疑問点やご要望をお伝えください。 -
発注
コンセプトミーティング後に、正確なお見積りを発行します。同時に「注文書」が発行されるので、注文書の提出をもって発注完了となります。 -
イラストレーターの選定
まずはイラストレーターを決めます。何人かイラストレーターの候補と実績をお伝えしますので、第３候補まで選定をお願いします。 -
スケジュールの確定
イラストレーターが決まり次第、詳細なスケジュールを確定していきます。 -
大ラフの制作
いよいよ制作開始です。まずは要素の数や配置などを確認するために、非常に簡単なラフ（ここにこの要素が入りますなど）をご確認いただきます。 -
ラフの制作
ここでは、よりブラッシュアップしたラフを制作します。各要素の雰囲気や形など、詳細な部分のイメージをご確認いただきます。 -
線画の制作
ラフの確認完了後、イラストのベースとなる線画を制作します。イラストレーターによっては、線画を制作せずに次の着彩に進む場合があります。 -
着彩
線画の完成を経て、色をのせていく着彩の工程に進みます。イラストが出来上がっていく最終段階となります。その様子も是非お楽しみください。 -
納品
着彩完了後、一部の色味を少し抑えたり、要素の配置を少しずらすなど細かい調整を実施して納品となります。
-
見積り依頼
本サイトの「見積り・お問い合わせ」ページから簡単にオーダーできます。まずは一度お問い合わせいただき、「どんなものを作りたいか」を簡単で構いませんのでお伝えください。 -
コンセプトミーティング
制作物の内容についてのヒアリングをZOOM等のオンライン通話ツール、もしくは直接お伺いしてご確認させていただきます。制作にあたっての疑問点やご要望をお伝えください。 -
発注
コンセプトミーティング後に、正確なお見積りを発行します。同時に「注文書」が発行されるので、注文書の提出をもって発注完了となります。 -
キックオフミーティング
いよいよ制作開始です。ディレクター、デザイナーの２名が参加し、両社にてデザイン、構成、仕様（サイズ、斤量、ページ数等）、ターゲット、スケジュールについて協議します。 -
台割・ワイヤー制作
各ページのワイヤー（どこにどんな要素が配置されるかの略図）を制作し、パンフレットの場合は同時に台割を制作します。ワイヤーを用いて、構成に乖離がないか確認していきます。 -
マテリアル制作
表紙と本文１ページのデザインイメージを制作します。まずは２ページ分をサンプルとして制作することで、イメージに乖離がないか確認していきます。 -
デザイン
マテリアルが固まった後、すべてのページのデザインに取り掛かります。どんなデザインに仕上がるか是非楽しみにお待ちください。 -
ライティング
各ページの文章をライティングしていきます。取材が必要な場合は別途内容ごとに取材を行わせていただき、テープ起こしした上でライティングに取り掛かります。 -
スチール撮影
各ページに必要な写真を撮影します。１つ１つの撮影場所が異なったり、遠方になる場合はカメラマンをそれぞれにアサインして対応します。レタッチの対応も可能です。 -
校正
PDFにて誤字脱字のチェックを行います。 -
初校確認
PDFにて初校をご確認いただきます。内容にミスがないかをチェックしていただき、修正指示（赤字）を戻していただきます。 -
再校確認
初校の赤字を受け、PDFにて再校をご確認いただきます。内容にミスがないかをチェックしていただき、修正指示（赤字）を戻していただきます。 -
校了/責了
すべてのページの修正と確認を終え、校了となります。基本的には以降の修正は難しくなるため、両社合意のうえ、次のステップに進みます。 -
入稿
データを入稿します。入稿データの制作には約１日いただき、サブデザイナーがデータを再度チェックした上で印刷所へ入稿します。 -
色校正
実際の紙を用いて校正を行う「本紙校正」、実際の印刷機を用いて校正を行う「本機校正」などがあります。色味などの調整を行いたい場合に実施する工程です。 -
下版
上記すべてを終え、いよいよ印刷に進みます。下版後の修正はできませんので、注意してください。 -
納品
お手元に完成品をお届けします。分納や、段ボール梱包にも対応しておりますので、コンセプトミーティングの際にお伝えください。