Service
サービス内容
クラテクルは、自社Webサイトに関する直接のご依頼も、制作会社・広告代理店などのご依頼も承っています。Webサイト企画の上流工程からデザイン・構築、公開後の運用までワンストップで対応する場合も、部分的に途中工程に参加するパターンもご相談が可能です。基本的にフルオンラインで対応していますが、可能な場合は事務所の京都から打ち合わせに伺うケースもあります。
Strategy
コンセプト設計
ご依頼のプロジェクトの中で一貫した構想を持つために、そのサイトのユーザーはどういう人たちなのか？何をどのように伝えるべきなのか？どういう振る舞いを期待するのか？などを文書や設計書として具体化します。
Planning
企画・要件定義
事前に実施したヒアリングやコンセプト設計の内容に沿って、制作ページ数やコンテンツ・仕様を固めて、プロジェクトの要件について合意形成します。Webサイトの目的やターゲットユーザーに合わせて、コンテンツをイチから提案する場合もあります。
Direction
進行管理
関係者の人数やプロジェクトの規模に合わせて適切なコミュニケーションツールを決めて、スケジュールやお互いのタスクの進行を確認できる状況を設定します。要件の変更などによりスケジュールの見直しが必要であれば、都度合意を取りつつ調整します。
Design
UI/UX/Webデザイン
ターゲットユーザーの目線に立って、サイトの意図やブランドの思いを伝えるには、どのようなデザインであるべきか考えることを大切にしています。利用者の使い方に寄り添って、視認性や操作性をデバイスごとに検討します。
Coding
HTML/CSS/JavaScript
HTML Living Standard に準拠し、アクセシビリティへの配慮はもちろん、文書構造を考えて丁寧にマークアップします。レスポンシブ・ウェブデザインを採用することが多いですが、見栄えだけに囚われず、運用やメンテナンス性にも配慮します。
CMS
更新システム
お客さまのサービスやニーズに合わせて、オリジナルのCMSテーマ（テンプレートファイル一式）をイチから設計します。お知らせなどの基本的な機能から商品の管理、検索機能など複雑な機能設計にもオリジナルで対応可能です。
Maintenance
運用・管理
サイト公開後にWebサイトを運用する際のコンテンツ更新のご相談も承ります。保守のご依頼をいただけましたら、外部サービスの仕様変更に伴う調整など、担当者さまが安心して引き続き運営を進められるように整えます。
Analytics
分析・改善
Google Analyticsなどを利用した解析や担当者さまへのヒアリングを通して、ご依頼のWebサイトの集客状況を把握して、今後の改善方針を提案します。プロジェクトの初期段階で分析を実施して、その後のコンセプト設計やコンテンツ企画に役立てる場合もあります。
制作の流れ
予算・スケジュールなどご依頼の内容が完全に固まっていない段階でも、まずはオンラインミーティングでご相談を承ることも可能ですので、お気軽にお問い合わせページよりご連絡ください。
お客さまが課題に感じている点、サービスやブランドの詳細、顧客層についてなどを事前に伺います。ご住所が京都市内の場合は対面で、それ以外では基本はオンラインで実施いたします。
サイト構成などの制作方針と今後の暫定スケジュール等と共に、概算お見積書を提出します。内容に合意いただけましたら、ご契約に際して発注書の取り交わしをお願いしています。
お客さまのご依頼の種類や規模によって、上流工程からご一緒する場合もありますし、早めにページ制作の準備へ進める場合など、ご状況やご条件に合わせて提案します。
企画・設計段階で合意しているガイドラインを元に、デザインの落とし込みからスタートして、コーディング・構築まで進めます。テキスト原稿や写真素材は完全支給をお願いすることが基本です。
本番公開前に、各種ブラウザやデバイスの表示確認、CMSの動作確認を行います。公開前後の具体的な作業の流れは、お客さまの環境を拝見した後にご相談します。
各種スキル・使用ツール・対応方針など
以下に当てはまらない内容でも対応可能な場合はありますので、ご不明点などありましたらお気軽にお問い合わせページよりご連絡ください。
デザイン
デザイン制作の実績では、飲食、ホテル、医療法人、不動産、ファッション、美容、地方自治体、学校法人などの業界向けにコーポレートサイト、ブランディングサイト、メディアサイト、採用サイトの経験が多数あります。バナー制作、画像補正などの部分的な作業もご相談可能です。複雑な表現や重要な役割を持たせるイラストレーションはパートナーに都度発注しています。私個人の画風・テイストを各案件に当てはめるというよりは、お客さまの目標や期待を適えるために、コミュニケーションの一環としてのデザインづくりを心がけています。
- 使用するソフト
- figma / Adobe XD / Photoshop / Illustrator
コーディング
HTML Living Standard に準拠し、普段はBEM + FLOCSSベースで設計しています。構造化データ（JSON-LD） のマークアップや Google Lighthouse での品質チェックも行っています。CSSフレームワークを使用したコーディングは行っていません。グラフィックを担当しない場合でも、デザイナーの意図を理解して忠実に再現しつつ、可能な限りシンプルで保守性の高いコードを心がけています。
- 使用する言語など
- HTML / CSS / SCSS（Dart Sass）/ JavaScript（Vanilla JS）/ Vue.js / PHP / SQL
- 使用するツールなど
- Gulp（ES Modules）/ Webpack / Babel / BitBucket / SourceTree / GitHub ...etc
CMS構築
主に「WordPress」を使用します。オリジナルテーマをイチから設計可能です。要件をお聞かせいただきましたら、コチラから仕様を提案します。ブロックエディタのカスタマイズも対応可能です。プラグインは極力使用せずに設計して、アップデートによる不具合の発生を最小限に抑えます。WordPress のフルサイト編集に対応したテーマ設計は行っていません。
- プラットフォーム
- WordPress / Movable Type
コンセプト設計などプランニング全般
ご依頼のWebサイトを通じて、お客さまが感じている課題や事業目標に貢献できるように、ターゲットユーザー像や集客プラン、コンテンツ方針などを具体化します。その後のデザイン制作やシステム構築、公開後の運用まで一貫した構想で進められるように文書化します。
- プラットフォーム
- コンセプト設計書 / 顧客コミュニケーションプラン図 / 集客プラン図 / コンテンツ制作指針書 / SEO方針書など
作業環境
制作はMacで行います。下記に記載のないコミュニケーションツールをご利用の場合は、ご相談いただければ、可能な限り対応いたします。基本的にはフルリモートでのコミュニケーションをお願いしています。
- 作業環境
- Mac / MAMP / Visual Studio Code / terminal
- コミュニケーションツール
- Google Meets / zoom / Slack / backlog / Chatwork / Miro