コーディングの代行・外注は
品質と実積のコーディングベースへ

簡易
お見積りはこちら

ジャーナル

Journal

2023.10.16

デザイン

Webサイト制作を依頼する際のデザインデータ

デザインデータの選定と重要性ウェブサイト制作を依頼する際、クライアントとデザイナーの間で円滑なコミュニケーションと効率的なプロジェクト進行を実現するためには、適切なデザインデータの提供が不可欠です。デザインデータはウェブサイトのビジュアルイメージを決定し、開発作業の基盤となるため、品質と正確性が求められます。適切なデザインツールの選定 1. Adobe XD（エクスペリエンスデザイナー） Adobe XDは、ユーザーエクスペリエンス（UX）とユーザーインターフェース（UI）デザインを行うための優れたツールです。アプリケーションのワイヤーフレーム、プロトタイプ、デザインの制作が可能で、クリック可能なプロトタイプを作成してウェブサイトのユーザビリティを検証することもできます。 2. Adobe Photoshop（フォトショップ） Photoshopは、静止画のデザインを行うのに最適なツールで、ウェブサイトの画像やグラフィックス、アイコンの制作に使用されます。高度な画像編集機能を提供し、デザイナーが美しいグラフィック要素を作成するのに適しています。 3. Sketch（スケッチ） Sketchは、Macユーザー向けのベクトルベースのデザインツールで、UI/UXデザインに特化しています。シンプルな操作性とプラグインの豊富さが特徴で、ウェブサイトのデザイン要素を効率的に作成できます。デザインデータの提供方法と注意点 1. レイヤーの整理と命名規則の設定デザイナーは、作成したデザインファイル内のレイヤーを適切に整理し、意味のある名前をつけることで、開発者がデザインを理解しやすくします。 2. フォントとアセットの提供使用したフォントやアセット（画像、アイコン、ボタンなど）は、ライセンスに違反しない範囲で提供されるべきです。フォントはアウトライン化し、アセットは適切な解像度で提供することで、表示の一貫性を保ちます。 3. プロトタイプの共有 Adobe XDやSketchを使用して作成したプロトタイプを共有することで、動作やアニメーション、ユーザーインタラクションを開発者に伝え、正確な実装を促進します。 Adobe Illustratorでのデザイン入稿 Adobe Illustratorは、高度なベクトルグラフィックスを作成するための優れたツールです。クオリティの高いデザインを生み出すためには、少し手間がかかることがあります。 1. 色設定とカラーモードの確認プリント物の場合、CMYKモードで設定された色が使用されます。デザイナーは、RGBからCMYKに変換する際、色の鮮やかさや明るさの変化に注意を払う必要があります。 2. フォントのアウトライン化デザインに使用したフォントは、出力時に正しく表示されるようにフォントをアウトライン化（パスに変換）する必要があります。これにより、他の環境でのフォントの適切な再現が保証されます。 3. 画像の埋め込みと解像度の確認使用した画像は、ドキュメントに適切に埋め込まれ、必要な解像度（通常300dpi）で保存されている必要があります。低解像度の画像は、印刷時に粗く表示される可能性があります。 4. レイヤーの整理と結合 Illustratorのレイヤーは、正しく整理され、必要に応じて結合（マージン）される必要があります。これにより、印刷時に不要なレイヤーが干渉することを防ぎ、出力がスムーズに行われます。結論ウェブサイト制作プロジェクトの成功には、クライアントとデザイナーの密接な連携と適切なデザインデータの提供が欠かせません。適切なデザインツールの選定と、デザインデータの整理、正確な提供は、ウェブサイトのデザイン品質と開発プロセスの円滑な進行を確保するために不可欠です。
2023.10.12

お見積り

委託

費用

コーディングの費用について知っておくべき重要なポイント

近年、テクノロジーの進化に伴い、多くの企業がコーディング作業を外部に委託することで効率を向上させ、プロジェクトのスピードを加速させています。しかし、コーディングの費用はプロジェクトの予算に大きな影響を与える要因です。ここでは、コーディングの費用に関する重要なポイントについて解説します。費用の透明性コーディングの外部委託を検討する際、費用の透明性は非常に重要です。提供されるサービスの範囲、料金体系、追加料金について明確に理解しておくことで、予算のオーバーランを回避できます。適切な契約書や合意書を作成し、費用に関する不明点を解消することが重要です。プロジェクトの規模と複雑性プロジェクトの規模や複雑性は、コーディングの費用に直結します。大規模で複雑なプロジェクトほど、より多くの作業時間と専門知識が必要とされ、それに応じて費用が高くなります。プロジェクトの規模と複雑性を正確に評価し、適切な費用を見積もることが重要です。技術スキルと経験外部の開発者やプログラマの技術スキルと経験は、費用に大きな影響を与えます。高度な技術スキルや豊富な経験を持つプロフェッショナルは、一般的に高額な報酬を求める傾向があります。プロジェクトの要件に適したスキルセットを持った開発者を選ぶことで、効率的な作業が可能となり、結果的に費用の削減につながります。コミュニケーションとサポート適切なコミュニケーションとサポート体制は、プロジェクトの成否に直結します。効果的なコミュニケーションが取れ、必要なサポートが提供されることで、プロジェクトの進行がスムーズに行われ、問題の迅速な解決が可能となります。コミュニケーションとサポートにかかる費用も、トータルのコストに含めて検討することが必要です。費用対効果の最適化最も重要なポイントは、費用対効果の最適化です。最適な品質と納期を保ちつつ、予算内でプロジェクトを成功させる方法を見つけることが目標です。複数の外部委託先を比較し、技術スキル、経験、コミュニケーション、サポート体制、価格などを総合的に評価し、最適な選択を行うことが費用対効果を最大化する秘訣です。コーディングの外部委託を検討する際には、これらのポイントを把握し、計画的な選定と評価を行うことで、プロジェクトの成功を確実なものにすることができます。簡単見積りフォームで確認まずは簡単見積りフォームで概算のお見積もりをご確認ください。簡単概算見積もりフォーム
2023.10.11

アニメーション

サイトに実装できるアニメーションの種類

リッチなアニメーションを指定して、オリジナリティ溢れるサイトにしたい時ってありますよね。でもどんなアニメーションがあるか分からなかったり、なんとなくイメージはあるけど伝えるのが難しくて挫折してしまう方もいると思います。そんな方向けにアニメーションのサンプルを定期的に紹介していきます！！アニメーションの実装に関してお問い合わせいただく際にご活用ください。今回はそもそもアニメーションにどんな種類があるか、コーディングベースサイト内のアニメーションを参考にご説明いたします。それぞれのアニメーションにどんなメリットがあるかもご紹介いたします。ローディングアニメーショントップページをローディングしている際に動くアニメーションです。【メリット】・動きで興味を惹きつけることができる。・画像やWebフォントの読み込みが遅い場合に、一瞬表示崩れが発生するのを隠せる。コーディングベースでは、タイピング風のアニメーションをつけています。画面表示後に動くアニメーションローディング後や画面遷移後など、ページが表示された際に動くアニメーションです。【メリット】・インパクトを与えることができる。・世界観をアピールできる。コーディングベースでは、トップページのメインビジュアルをアニメーションで表現しています。また、下層ページではページタイトルが表示されるアニメーションをつけています。スクロールアニメーションスクロールして、要素が見える際に動くアニメーションです。【メリット】・視線誘導ができる。・動きがあると飽きさせない。コーディングベースでは、テキストや画像など様々な箇所にスクロールアニメーションがついています。弊社のコーディングでは、デザインがスクロールアニメーションに適している場合シンプルなスクロールアニメーションを無料で実装いたします。（動きは弊社にお任せください）ホバーアニメーションボタンなどリンクの上にカーソルを合わせた際に動くアニメーションです。【メリット】・リンクのクリックに繋がる。コーディングベースでは、ボタンやテキストリンクなどについています。弊社のコーディングでは、リンクにはホバーアニメーションを基本的にお付けいたします。シンプルなホバーアニメーションは無料で実装いたします。（動きは弊社にお任せください）ページ遷移アニメーション別のページに遷移する際の、切り替わりアニメーションです。【メリット】・ページが変わったことを明示できる。・画像やWebフォントの読み込みが遅い場合に、一瞬表示崩れが発生するのを隠せる。コーディングベースではふわっと切り替わるアニメーションをつけています。クリックで動くアニメーションハンバーガーメニュー、タブ、アコーディオンパネルなどクリックで動きが発生する要素はクリックした際のアニメーションをつけることができます。【メリット】・クリックするとどうなるか伝えることができる。（開くを意味するデザインから閉じるを意味するデザインに変わるなど）コーディングベースではハンバーガーメニュー、タブ、アコーディオンパネルにアニメーションがついています。
2023.10.10

JavaScript

IntersectionObserverを使ってスクロールアニメーションをより簡単に実装！

サイトの雰囲気を作るスクロールアニメーション。ふわっとテキストや画像を表示することで柔らかく、スッと表示させることでスタイリッシュな雰囲気を作りだすなど、リッチなサイトを作り出すために使われてきました。今まではこのスクロールアニメーションを作りにはjQueryを使って一手間かける必要がありましたが、今回紹介するJavaScriptのIntersectionObserverは効率よくアニメーションを実装するのに大変役に立ちます！今回は概要のみお伝えします。従来のjQuery(Javascript)を使ったスクロールアニメーションの実装方法従来のスクロールアニメションではJavascriptのscrollイベントを利用していました。 scrollイベントの問題点は画面位置を取得する必要があり、ユーザーがスクロールをすると関数を呼び出しという、ブラウザへの負荷が重くなるのが欠点でした。画面がリサイズされれば再度位置を取得し直し、ページの一番上からアニメーションをかける要素までの距離（値）を取得し、常に対象要素までのを値を比較し続けるということが必要だったのです。 IntersectionObserverによってスクロールアニメーションがより便利に！ Intersection Observerを使うと何がいいかというと『特定の要素が画面内(ブラウザwindow内)に入ってきた時に関数を実行できること』これです！ jQueryで行っていたように、常に関数を実行してスクロールの値を取得する負荷もありません。何より条件の指定方法が「要素が画面内に入ってきた時」というわかりやすい指定なのが魅力です。また、Intersection Observerのオプションを使えば下記のようなことも可能です。・要素がブラウザ画面内の半分の位置までスクロールされたら、アニメーションを実行・要素がブラウザ画面内に入る前にアニメーションを実行(pxで指定することが可能)・要素がブラウザ画面内に入った1回目だけ、アニメーションを実行これらを従来のjQueryで実装するとどうしてもコードが複雑になっていました。IntersectionObserverのプロパティを使うと、コードもスッキリします。今後のWebアニメーションを可能性を秘めたIntersectionObserver。これからも学習してより理解を深めていきます。今回は概要をお伝えしましたが、次回はコードを含めた実装方法をお伝えしたいと思います！！
2023.10.09

SEO

ウェブサイトの成長を促す！効果的なSEO戦略の実践方法

SEO（Search Engine Optimization）の基本 SEOは検索エンジンでのウェブサイトの表示順位を向上させ、オーガニック（自然な）流入を増やすための戦略です。検索エンジンのアルゴリズムを理解し、それに基づいた最適化を行うことが成功の鍵です。キーワードリサーチと戦略的なキーワード選定効果的なSEO戦略の第一歩は、適切なキーワードの選定です。競合が激しい一般的なキーワードだけでなく、長尾キーワード（特定のフレーズを含むキーワード）にも注目し、ターゲットとする顧客のニーズに合致したキーワードをリサーチしましょう。コンテンツの品質とユーザーエクスペリエンス検索エンジンは、ユーザーエクスペリエンスと関連性の高いコンテンツを重視します。高品質なコンテンツを提供し、ユーザーが求める情報を明確に伝えることで、検索エンジンでのランキング向上が期待できます。また、読みやすさやモバイルフレンドリーなデザインも重要な要素です。ユーザーエクスペリエンスの「エクスペリエンス」は「体験、経験」を意味します。Wikipediaでは以下のように定義されてます。ユーザーエクスペリエンス（英: user experience）とは、人工物（製品、システム、サービスなど）の利用を通じてユーザーが得る経験である。しばしば「UX」と略される[1]。「ユーザー経験」「ユーザー体験」などと訳される。※引用元：ユーザーエクスペリエンス – Wikipedia 外部リンクと内部リンクの最適化他の信頼性のあるサイトからのバックリンク（外部リンク）は、検索エンジンにとってウェブサイトの信頼性を示す重要な指標となります。また、ウェブサイト内のページ同士を結ぶ内部リンクも、ユーザーエクスペリエンスを向上させ、検索エンジンのクローラーがサイト内のページを効果的にインデックスするのに役立ちます。モバイルフレンドリーデザインの採用現代の検索エンジンは、モバイルフレンドリーなウェブサイトを好ましく評価します。スマートフォンやタブレットからのアクセスに最適化されたデザインは、検索エンジンのランキングにプラスの影響を与えます。定期的な分析と最適化 SEO戦略を実行したら、定期的な分析を行い、トラフィックの動向やキーワードの効果を確認しましょう。Google Analyticsなどのツールを使用して、訪問者の行動パターンやコンバージョン率を把握し、戦略を最適化していくことが重要です。 Google Analytics 4（GA4）への移行：新しい時代のウェブ分析 Google Analytics 4（GA4）は、Google Analyticsの次世代バージョンとして、2020年10月に正式に発表されました。これに伴い、従来のUniversal Analytics（UA）からGA4への移行が推奨されています。GA4は、ユーザーセンタリズム、機械学習機能、クロスプラットフォームの統合など、多くの新機能を提供しており、ウェブ分析の新しい時代を切り開いています。 GA4への変更の背景 GA4の導入背景には、ウェブの進化とユーザーの行動パターンの変化があります。モバイルデバイスの普及、アプリ利用の増加、オフラインとオンラインの統合など、これらの変化に対応するために、より洗練されたウェブ分析が求められていました。 GA4の主な特徴イベント中心のデータモデル: GA4では、ウェブサイト上で発生したイベント（ページビュー、クリック、購入など）に焦点を当て、これらのイベントデータを分析することが可能です。ユーザーセンタリズム: ユーザーの行動と属性に基づいたセグメンテーションが強化され、個々のユーザーグループに対してパーソナライズされた分析が行えます。機械学習の活用: 機械学習アルゴリズムを使用して、ユーザーの行動パターンや将来のトレンドを予測し、ビジネスの意思決定をサポートします。クロスプラットフォームの統合: ウェブ、モバイルアプリ、オフラインのイベントなど、複数のプラットフォームのデータを統合的に分析できるため、ユーザーエクスペリエンスを包括的に把握できます。移行の重要性と対応策新機能の活用: GA4の新機能を活用することで、ユーザーの行動パターンや嗜好をより精密に把握し、効果的なマーケティング戦略を立案できます。計画的な移行: GA4への移行は計画的に行うことが重要です。現在のUniversal Analyticsデータのバックアップを取得し、新しいプロパティを設定し、トラッキングコードを更新するなど、スムーズな移行を行いましょう。トレーニングと教育: チームメンバーや関係者に対して、GA4の新機能や使い方についてのトレーニングを提供し、新しいプラットフォームを最大限に活用できるようにします。結論効果的なSEO戦略はウェブサイトの成長に不可欠です。適切なキーワード選定、高品質なコンテンツの提供、外部リンクと内部リンクの最適化、モバイルフレンドリーデザインの採用、そして定期的な分析と最適化が、ウェブサイトの検索エンジンでのランキング向上とオーガニックなトラフィック増加につながります。これらの戦略を組み合わせ、持続的な努力を続けることで、成功を収めることができるでしょう。
2023.10.05

WordPress

WordPressアドレスとサイトアドレスのドメインが違う場合の対処法

WordPressのシステムアドレスとサイトアドレスについて WordPressは管理画面から「WordPressアドレス」と「サイトアドレス」を設定できるようになっています。「WordPressアドレス」というのはシステムがインストールされているURLで、サイトアドレスはユーザーがサイトを見たときにフロントページが表示されるURLです。このように通常は同一URLです。WordPressのシステム全体をひとつのディレクトリ内に納めることも可能で、その場合は「WordPressアドレス」を変更します。「WordPressアドレス」と「サイトアドレス」を個別に設定することで、管理画面のURLとユーザーがアクセスする画面のURLを分離させることができるのです。管理画面のドメインが違う場合の問題多くのサイトは管理画面もユーザー画面も同じドメインで運用します。ところが「管理画面のドメインを別にしたい」というお客様もいらっしゃいます。そのような場合はリバースプロキシというサーバを介することで実現できます。セキュリティレベルの向上や負荷分散などのメリットがありますが、WordPressはリバースプロキシ上で正常動作するようには作られていないため不具合が発生します。どのような問題が起きるかサーバ技術者がリバースプロキシを適切に設定し「WordPressアドレス」と「サイトアドレス」のドメインを分離しても、ユーザー画面に出力されるソースコード内のハイパーリンクが「WordPressアドレス」のドメインになってしまいます。つまり、ブラウザのアドレスバーには「サイトアドレス」のドメインが表示される一方で、ソースコードには「WordPressアドレス」のドメインが混ざっている状態となり、これでは管理画面のドメインを隠したつもりがダダ洩れです。解決策この問題を解決するため、ユーザー画面側に出力されるハイパーリンクのURLを書き換えるアクションフックを functions.php に追記します。 // ドメインリライト function is_login_page() { return in_array($GLOBALS['pagenow'], array('wp-login.php', 'wp-register.php')); } if(is_admin() === false && is_login_page() === false){ function replace_domain_url($url){ $url = str_replace("●システム側のドメイン●","■ユーザー側のドメイン■",str_replace("href='//●システム側のドメイン●'","href='//■ユーザー側のドメイン■'",str_replace('href="https://●システム側のドメイン●"','href="/"',str_replace('https://●システム側のドメイン●/','/',$url)))); return $url; } function buf_start() { ob_start("replace_domain_url"); } function buf_end() { ob_end_flush(); } add_action('after_setup_theme', 'buf_start'); add_action('shutdown', 'buf_end'); } ブロックエディタが使えない問題ユーザー側に出力されるハイパーリンクのドメインをすべて書き換えてひと安心、と思いきや、今度はブロックエディタが正しく機能しないという問題が起こります。これは REST API のURLに起因する不具合なので、次のようなフィルターフックを functions.php に追記します。 // REST APIのURLリライト add_filter( 'rest_url', 'rest_url_replace' ); function rest_url_replace($url){ if (is_admin())$url = str_replace(home_url(), site_url(), $url); return $url; } 運用上の注意もともとイレギュラーな施策をしているので、これらの手法が万全というわけでもなく、またWordPressのアップデートなどにより予期せぬ不具合が発生する可能性もあります。サイトの運用にあたってはそのあたりのリスクを念頭に日常的な監視が必要になってくるかと思います。