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

簡易
お見積りはこちら

ジャーナル

Journal

2023.11.29

リモートワーク

リモートワークの未来

近年、世界中でリモートワークが急速に普及しています。これは、技術の進歩とコロナウイルスのパンデミックによる状況の変化によるものです。リモートワークは柔軟性と効率性を提供する一方で、新たな課題や課題も浮き彫りにしています。柔軟性と効率性のバランス場所に縛られずに仕事ができ、従業員は適切な環境で働くことができます。仕事と生活の調和がとりやすくなり、従業員のワークライフバランスが向上します。リモートワークにより、通勤時間が削減され、仕事に集中できる時間が増加します。仕事の生産性向上と、従業員が自分のペースで働ける利点があります。リモートワークの鍵は表現力リモートワークが一般的となり、日々変化する業務環境において、表現力がますます重要な要素となっています。仕事は同じことの繰り返しではなく、新たな課題に直面することが常です。このような状況で問題を抽出し、メンバーと効果的に共有・相談するためには、高い表現力が不可欠です。情報漏洩対策コーディングベースでは機密情報の観点から社内常駐が基本となっています。これは、情報の漏洩や不正アクセスから企業とお客様を守るための重要な手段です。リモートワークにおいても同様に、遠隔地からでも安全に情報をやり取りできるように万全のセキュリティ体制を整えています。強固な暗号化技術やアクセス制御の仕組みを導入し、情報セキュリティのリスクを最小限に抑えています。遠隔地のお客様とのコミュニケーション遠隔地にいるお客様とは動画会議を通じて効果的なコミュニケーションを取らせていただきます。ビジネスの進捗や課題をリアルタイムで共有し、円滑なプロジェクト進行を可能にします。同時に、安全な環境を構築することで、お客様に安心感を提供しています。
2023.11.28

アクセシビリティ

デザイン

デザインのシンプル化

「デザインのシンプル化」は、ウェブデザインやデザイン全般で注目されている重要なトレンドの一つです。これは、過剰な要素を取り除き、シンプルで使いやすいデザインを追求するアプローチを指します。以下は、デザインをシンプルにするためのいくつかの手法や原則です。これらの原則を組み合わせることで、デザインのシンプル化が実現できます。シンプルなデザインはユーザーエクスペリエンスを向上させ、情報の伝達を効果的に行うことができます。ミニマリズムミニマリズムは、不要な要素やデザインの複雑さを排除し、シンプルでクリーンなデザインを追求するスタイルです。シンプルなフォント、色彩、そして余白を活用することが含まれます。直感的なナビゲーションシンプルなデザインにおいては、ユーザーがサイトやアプリを直感的に操作できるようなナビゲーションが重要です。分かりやすいメニュー構造やシンプルなアイコンを使用して、ユーザーエクスペリエンスを向上させます。色の単純化ラーパレットをシンプルにし、効果的に使用することで、デザインを洗練されたものに保ちます。過剰な色の使用は避け、コントラストを活用して重要な要素を際立たせます。フォントの選択シンプルなデザインでは、フォントの種類やスタイルも重要です。読みやすいフォントを選択し、統一感を保つことがデザインのシンプル化に寄与します。 Adobeフォントの利用に注意 1.Adobeアカウントと契約の必要性 Adobeフォントを利用する場合は、利用者がAdobeアカウントを取得し、契約を行う必要があります。お客様にはこの点を事前に説明し、スムーズなフォントの利用を確保しましょう。Adobeフォントの契約解除に伴い、フォントの利用が制限される可能性があります。お客様にはこのリスクを理解していただき、契約の変更に注意を払ってもらうことが重要です。 2. 代替手段としての画像書き出し Adobeフォントの利用に不安がある場合、テキストを画像として書き出すことも検討されます。ただし、検索エンジン最適化（SEO）や可搬性の観点から、適切な代替手段を検討しましょう。 3. お客様から提供されたAdobeコードの利用 Adobeフォントを使用する際には、お客様から提供されたAdobeコードを使用していることを明示しましょう。これにより、ライセンスの透明性を確保し、問題が生じた際に円滑な対応が可能です。
2023.11.27

Figma

デザイン

委託

Figmaによるデザインデータ

Figmaは、クラウドベースのデザインツールであり、ウェブデザインやUI/UXデザインを中心に様々なデザインプロジェクトに利用されています。リアルタイムの協力編集、プロトタイピング、ベクトルイラストレーション、プロダクトデザインなど、多岐にわたるデザインニーズに対応しています。特徴と機能クラウドベースの協力編集 Figmaはウェブブラウザ上で動作し、クラウド上にデザインプロジェクトが保存されます。これにより、どこからでもアクセス可能で、同時に複数のユーザーがリアルタイムで協力編集できます。マルチプラットフォーム対応 Windows、Mac、Linuxなど、異なるプラットフォームやデバイスで使用できます。さらに、モバイルデバイスでもアプリを通じてデザインのプレビューやコメントが可能です。プロトタイピング Figma内でプロトタイピングを行うことができ、デザインのフローを視覚的に確認できます。ユーザビリティテストやステークホルダーへの共有に役立ちます。ベクトルイラストレーションベクトルツールを備えており、アイコンやイラスト、ロゴなどの作成が可能です。ベクトル形式で保存され、拡大縮小しても画質が劣化しません。ベクトルイラストレーションベクトルツールを備えており、アイコンやイラスト、ロゴなどの作成が可能です。ベクトル形式で保存され、拡大縮小しても画質が劣化しません。デザインシステムコンポーネントやスタイルなどを組み合わせたデザインシステムを構築できます。これにより、一貫性のあるデザインを保ちながら効率的に作業できます。プラグインエコシステム Figmaは豊富なプラグインエコシステムを提供しており、デザイナーがツールや機能を拡張できます。これにより、ワークフローのカスタマイズが可能です。バージョン管理プロジェクトの変更履歴が保存され、過去のバージョンに戻ることができます。誤って行われた変更を取り消すなど、柔軟で安全な作業が可能です。利用シーン UI/UXデザインウェブサイトやアプリケーションのUI/UXデザインを作成し、プロトタイプを共有・テストするのに適しています。プロダクトデザインプロダクトの外観やユーザーエクスペリエンスのデザインを行います。特に多くのステークホルダーが関与するプロジェクトにおいて、クラウド上での協力編集が有用です。イラストレーションベクトルイラストレーションの作成やアイコンデザインにも利用されます。デザインシステム管理デザインシステムの構築や管理に使用され、統一感のあるデザインを保ちながらプロジェクトを進めることができます。 Figma利用時の注意点 Figma（フィグマ）はデザインとコーディングのスムーズな連携を可能にする優れたツールですが、依頼時にはいくつかの重要なポイントに留意することが求められます。これらのポイントを押さえることで、コーディングの進行が円滑になり、確認にかかる工数を削減できます。 1. コーディングの依頼前に検討事項を共有する Figma上でデザインが完成した段階で、コーディングに移る前に検討すべき事項がいくつかあります。例えば、ホバーエフェクトやアニメーションの動作、モバイル対応などがこれに当たります。これらの事項はデザインと同時に共有されると、コーダーはより正確にコーディングを進めることができます。 2. コーディングの際には指示を具体的にする Figma上のデザインにおいて、特に微細な部分や挙動に関しては、具体的な指示が必要です。例えば、フォントサイズやカラーコード、マージンの値などは明確に指定されると、コーダーが理解しやすくなり、ヒューマンエラーが軽減されます。 3. 不要なコメントは削除しておく Figmaを活用するプロジェクトでは、初期段階では細かなやり取りや議論がコメントとして残されることが一般的です。しかし、デザインが確定し、コーディングの段階に進む際には、不要なコメントを削除することが重要です。コーダーはデザイナーからの指示やフィードバックに集中しやすくなります。プロジェクト全体の情報が整理され、明確なコミュニケーションが可能になります。デザインの確定後には、焦点をコーディングや最終確認に絞ることが求められます。 AdobeによるFigma買収 Adobe社が、デザインツールのトッププレイヤーであるFigma社を200億ドル（約2.8兆円）で買収することが発表されました。この戦略的な買収により、Adobeはそのクリエイター向けツールのポートフォリオをさらに強化し、Figmaのユーザーベースにアクセスすることが期待されています。 Figmaは、オンラインでの共同作業やクラウドベースのデザインツールとして、デザイナーたちに高い評価を受けています。この買収により、Adobeはそのデザイナーコミュニティへの影響をさらに拡大し、クリエイターたちにより多くのオプションを提供することが可能になるでしょう。 XDの今後についてしかし、一方でAdobe XDの将来には不透明な部分もあります。現在、Adobe XDはユーザーフレンドリーなインターフェースや強力なプロトタイピング機能を備え、多くのデザイナーに支持されています。ただし、買収に伴い、Adobe XDのサービスが終了する可能性が指摘されています。 AdobeおよびFigmaは共同声明で、「今後のプロダクトやサービスに関しては、ユーザーに十分な通知とサポートを提供する」と述べており、ユーザーたちに安心感をもたらそうとしています。デザイン業界において、これほどの大手企業同士の合併は大きな注目を集めています。今後の展開に注目が集まる中、AdobeとFigmaはデザイナーコミュニティにとってどのような価値を提供していくのか、今後の発表が期待されます。
2023.11.24

CSS

Sass

Scss

SassとScss: クリエイティブなスタイルシートのためのパワフルなツール

ウェブデザインと開発の分野では、スタイルシート言語が不可欠です。その中でも、Sass（Syntactically Awesome Stylesheets）とその拡張であるScss（Sassy CSS）は、効率的で柔軟なスタイリングの手段として広く採用されています。コーディングベースでは主にScssによるコーディングを行なっております。お客様の環境に合わせて柔軟に対応させていただきますので気軽にお問い合わせください。 Sassとは？ Sassは、CSSの拡張機能であり、スタイルシートをより効率的かつ保守しやすくするために設計されています。SassはCSS互換の構文を持ち、変数、ネスト、ミックスイン、関数などの機能を提供しています。コーディングベースでは、とくにご指定がなければCSSコーディングはSassを使います。ご希望のタスクランナーに対応させる場合はご相談ください。 Scssとは？ SCSSは、Sassの一部であり、CSSの拡張機能を提供するメタ言語の一つです。SCSSは、従来のCSSと互換性があり、CSSの記法を拡張して開発者がより効率的にスタイルシートを記述できるようにします。 SassとScssの違い Sassは括弧 {} やセミコロン ; を使用せず、インデントによって階層構造を表現するのに対してScssは、CSSライクな構文を採用しており、括弧 {} やセミコロン ; を使用します。Sassの拡張は.sass、Scssの拡張子は.scssです SassとScssの共通点変数、ミックスイン、ネストどちらも変数、ミックスイン、ネストなど、CSSの拡張機能を提供しています。同じコンパイラどちらも同じコンパイラを使用してCSSに変換されます。一般的には、Node.jsを使用したlibsassやRubyのSassコンパイラが利用されます。 Preprosについて開発者が効果的にコーディングできるようにするツールで、コードをより効率的に記述し、最終的なウェブページやアプリケーションのパフォーマンスを向上させる役割を果たします。Prepros（プリプロス）は、その中でも特にCSSプリプロセッサを扱うツールで、シンプルで直感的な操作性を備えています。 CSS プリプロセッシング Preprosは、主要なCSSプリプロセッサであるSass、Less、Stylusに対応しています。これにより、変数、ネスト、ミックスインなどの機能を使用して、メンテナンス性の高いスタイルシートを記述できます。自動プレフィックスベンダープレフィックス（-webkit、-moz、-ms など）の自動追加をサポートしており、クロスブラウザの互換性を向上させます。 JavaScript 圧縮 JavaScript ファイルの結合と圧縮を行い、ファイルサイズを最小化します。画像圧縮イメージの最適化や圧縮が可能で、ウェブページの読み込み速度を向上させます。ライブリロードファイルの変更を検知し、自動的にブラウザをリロードして即座に変更を反映します。タスクランナータスクランナーとしても機能し、ビルドプロセスを自動化するためのタスクやワークフローを設定できます。変数 Sassでは変数を使用して値を保持できます。変数を使うことで、同じ値を複数の場所で使用する際に一括で変更できるため、保守性が向上します。ネスト Sassではセレクタをネストすることができます。これにより、HTMLの構造とスタイルが対応しやすくなり、読みやすいコードを書くことができます。ミックスインミックスインは再利用可能なスタイルの集まりを作成できます。これにより、同じスタイルを複数のセレクタに適用する場合や、汎用的なスタイルを定義する場合に便利です。関数 Sassは組み込みの関数やユーザー定義の関数をサポートしています。これにより、計算や特定のスタイルの生成に役立ちます。条件分岐 @ifや@else if、@elseなどの条件分岐が使用できます。これにより、特定の条件に基づいてスタイルを変更できます。
2023.11.22

アクセシビリティ

顧客満足度

ウェブアクセシビリティ導入のすすめ

2024年4月1日、改正障害者差別解消法が施行されます。この法律は、障害のある人もない人も、互いにその人らしさを認め合いながら共に生きる社会（共生社会）を実現するために2013年に公布されたものですが、この度の改正での大きなポイントは、これまで行政機関等に義務化されていた「合理的配慮の提供」が民間事業者にも義務化されることになった点です。内閣府のリーフレット「合理的配慮」とは、障害のある人が障害のない人と同じように行動したりサービスの提供を受けたりすることができるよう、周りの人が、過度の負担にならない範囲で、それぞれの違いに応じた対応をすることをいいます。この法律の施行を前にウェブアクセシビリティへの注目度が高まっています。ウェブアクセシビリティとは、高齢者や障害者など心身の機能に制約のある人を含め、ウェブを利用する「すべての人」がウェブで提供されている情報を取得し、さまざまな環境でサービスや機能を利用できることを意味します。具体的にウェブアクセシビリティが確保できているウェブサイトとは、次のような状態にあるものです。・目が見えなくても情報が伝わること、操作できること。・キーボードだけで操作できること。・一部の色が区別できなくても得られる情報が欠けないこと。・音声コンテンツや動画コンテンツで、音声が聞こえなくても話している内容が分かること。ウェブアクセシビリティ導入ガイドブックウェブアクセシビリティには「JIS X 8341-3:2016」という国際規格があり、ウェブサイトがどの程度ウェブアクセシビリティに配慮されているかの達成基準としてレベルA、レベルAA、レベルAAAの3つの適合レベルが定められています。レベルAウェブアクセシビリティを確保するために最低限達成するべき状態レベルAAウェブアクセシビリティが十分確保されている状態。日本でも公的機関に対して求められるレベルレベルAAA非常に高いウェブアクセシビリティが確保できている状態本来、ウェブサイトは「誰でも使いやすいかどうか」を常に意識して作られていることが望ましいものです。とはいえウェブアクセシビリティの確保には相応の制作コストが必要になり、また実際にレベルAAAを達成しようとすると基準のすべてを満たすことのできないコンテンツが存在する場合も多くあるため、サイト全体の一般的な方針としてレベルAAAでの適合を要件とすることは推奨されていません。現実的なところで、一般的なウェブサイトであればレベルAAまたはレベルAに適合させれば、誰でも使いやすいものを目指した「合理的配慮」を提供していると言えます。（規格適合性とはまた別のところにある使いやすさもあるので、その考察はまたの機会で……）コーディングベースでは、ウェブアクセシビリティに関するご相談も承っております。なお、規格に適合させるためにはデザイン面での配慮も重要になります。新規ご案件でデザインをご入稿される場合や、既存サイトを改修する場合などでデザインを大幅に変更するご提案をさせていただくこともあります。その点はご了承ください。
2023.11.22

WordPress

アクセシビリティ

プラグイン

多言語

多言語サイト

多言語サイト（Multilingual Website）は、複数の言語でコンテンツを提供し、異なる言語圏のユーザーに対応するために設計されたウェブサイトです。言語の選択と管理サイトが提供する言語を選択し、それぞれの言語に対応するコンテンツを管理する必要があります。一般的な選択肢には、英語、スペイン語、フランス語、ドイツ語、中国語、日本語などがあります。これらの言語に基づいて、ユーザーが好みの言語を選択できるようにします。 URLの管理各言語のコンテンツに対して、一貫性のあるURL構造を確立することが重要です。多くの場合、言語別にサブディレクトリ（例：/en/、/jp/）、サブドメイン（例：en.example.com、jp.example.com）、またはクエリパラメータ（例：?lang=en）を使用して言語を区別します。メニューとナビゲーションサイトのメニューやナビゲーションは、利用可能な言語に基づいて適切に表示および構成される必要があります。これにより、ユーザーが容易に言語を切り替え、希望のコンテンツにアクセスできます。コンテンツの翻訳各ページのコンテンツは、対応する言語に翻訳される必要があります。翻訳プロセスは専門の翻訳者や翻訳サービスを利用して行われ、文化的な違いや地域差異にも注意が払われます。地域ごとの法規制に対応各言語圏における法規制や文化的な慣習に合わせて、サイトの内容やデザインを調整することが重要です。言語切り替えの提供ユーザーが簡単に言語を切り替えるためのオプションや、ブラウザの言語設定に基づいて自動的に適切な言語を選択する仕組みを提供します。 Wordpressのプラグイン「Bogo」 Bogoは、WordPressサイトに多言語機能を追加するためのプラグインです。このプラグインを使用すると、サイトのコンテンツを異なる言語に簡単に翻訳し、ユーザーが好みの言語で閲覧できるようになります。Bogoは、使いやすさと柔軟性を兼ね備え、WordPressユーザーが多言語サイトを構築するための手段として広く採用されています。 Bogoとは Bogoは、WordPressサイトに多言語機能を追加するためのプラグインです。このプラグインを使用すると、サイトのコンテンツを異なる言語に簡単に翻訳し、ユーザーが好みの言語で閲覧できるようになります。Bogoは、使いやすさと柔軟性を兼ね備え、WordPressユーザーが多言語サイトを構築するための手段として広く採用されています。 Bogoの主な機能簡単な設定 Bogoは、専門知識がなくても簡単に設定できるように設計されています。プラグインを有効化するだけで、多言語機能が即座に利用可能になります。言語の追加と管理 Bogoを使用すると、サイトに対応する言語を追加し、管理することができます。各言語には独自の設定が可能で、独自のURL構造や言語コードを指定できます。記事やページの簡単な翻訳 Bogoは、記事やページの翻訳を手間なく行うためのユーザーフレンドリーなエディタを提供しています。Google翻訳などの外部サービスとの連携もサポートされています。ウィジェットとショートコード Bogoは、ウィジェットやショートコードを使用して、サイト上で言語切り替えのリンクやフラグを簡単に配置できます。これにより、ユーザーがサイトの異なる言語バージョンにシームレスに移動できます。 Bogoの設定方法プラグインのインストールと有効化 WordPressの管理画面から、「プラグイン」メニューに移動し、「新規追加」ボタンをクリックしてBogoを検索し、インストール・有効化します。言語の追加「設定」メニューから「Bogo」を選択し、言語を追加します。各言語には、言語コードやURL構造などを指定するオプションがあります。記事やページの翻訳管理画面で記事やページを選択し、対応する言語のコンテンツを入力します。Bogoのエディタを使用すると、翻訳が簡単に行えます。ウィジェットやショートコードの配置設定画面からウィジェットやショートコードを設定し、サイト上で言語切り替えのリンクやフラグを表示します。