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

簡易
お見積りはこちら

ジャーナル

Journal

2023.10.27

WordPress

カスタムフィールドの値をカスタム投稿タイプを使った記事一覧へ表示する

投稿一覧や固定ページ一覧にカスタムフィールドの値を表示させる方法、という記事はよくあるので、今回はカスタム投稿タイプに紐づいた複数のカスタムフィールドの値を表示させる方法をご紹介します。 // カスタム投稿タイプ：hoge // カスタムフィールド：field_1 // カスタムフィールド：field_2 // カスタムフィールド：field_3 function manage_posts_columns($columns) { $columns['ex_company'] = "field_1"; $columns['ex_date'] = "field_2"; $columns['ex_state'] = "field_3"; return $columns; } function add_column($column_name, $post_id) { if( $column_name == 'ex_company' ) { $stitle = get_post_meta($post_id, 'ex_company', true); } if( $column_name == 'ex_date' ) { $stitle = get_post_meta($post_id, 'ex_date', true); } if( $column_name == 'ex_state' ) { $stitle = the_field('ex_state'); } if ( isset($stitle) && $stitle ) { echo attribute_escape($stitle); } else { echo __(''); } } add_filter( 'manage_hoge_posts_columns', 'manage_posts_columns' ); add_action( 'manage_hoge_posts_custom_column', 'add_column', 10, 2 ); 上記コードを functions.php に追記します。以上です。
2023.10.26

アニメーション

デザイン

Webサイト制作とアニメーション：ユーザーの興味を引きつける魅力的なウェブデザイン

アニメーションのウェブデザインへの重要性ウェブ制作におけるアニメーションは、静的なデザインに動きとエネルギーを加え、ユーザーの興味を引きつける力を持っています。アニメーションはユーザーエクスペリエンス（UX）を向上させ、ブランドの個性を際立たせる効果的な手法です。留意すべきアニメーションの種類 1. マイクロアニメーション短いアニメーション効果を要素に追加することで、ユーザーの注意を引きつけ、操作のフィードバックを提供します。ボタンのホバーエフェクトやスクロール時の要素のフェードインなどが代表的です。 2. ストーリーテリングアニメーション物語性を持ったアニメーションを使って、ブランドのストーリーを伝えることができます。ウェブサイト上でキャラクターアニメーションやナレーションを組み合わせ、ユーザーに魅力的な体験を提供します。 3. トランジションとエフェクトページ遷移や要素の表示・非表示、スクロール効果など、滑らかなトランジションとエフェクトを使って、ユーザーがサイト上を自然に移動できるようにします。これにより、ユーザーの興味を途切れさせず、一体感のあるデザインを構築できます。アニメーションの適切な使用法 1. ユーザー体験の向上適切に配置されたアニメーションは、ユーザーがウェブサイト上で求める情報を見つけやすくし、サイト内での滞在時間を増加させます。 2. 情報伝達の効果的な手段アニメーションは、複雑な情報や機能をわかりやすく伝える手段として活用できます。例えば、商品の動作説明やサービスの特長を視覚的に示すことができます。 3. ブランドの個性を表現独自のアニメーションスタイルやモーションデザインを採用することで、ブランドの独自性やクリエイティブ性を強調し、ユーザーに印象を残します。アニメーションの実装と最適化 1. パフォーマンスへの影響の最適化過度なアニメーションや大容量のファイルは、ページ読み込み速度を低下させる可能性があるため、最適なパフォーマンスを保つためには適切な最適化が必要です。 2. ユーザー環境への適応異なるデバイスやブラウザでのアニメーションの見え方に違いが生じることを考慮し、クロスブラウザ対応とレスポンシブデザインを実施します。結論ウェブ制作におけるアニメーションは、ユーザーエクスペリエンスの向上、情報伝達の効果的な手段、ブランドの個性の表現として、非常に重要な役割を果たします。デザイナーは、適切なアニメーションの種類と使用法を把握し、ユーザーに魅力的で洗練されたウェブサイト体験を提供するために積極的に活用することが求められます。
2023.10.25

Movable Type

MovableTypeの魅力「コンテンツ」と「分離」

改めてWordpressとの違いは？「WorpdressとMovableTypeどっちがいいの？」というご相談は大変多く頂いております。・Wordpressは「無料」「カスタマイズしやすい」・MovableTypeは「強セキュリティ」「表示が速い」ざっくり言うとこれが大きな違いでしょう。 Wordpressは利用者も多いようですがMovableTypeは「そもそも何ができるの？」と思う方もいらっしゃるでしょう。そんな方へ向けて実際にMovableTypeの管理画面を使って魅力をご紹介をします！！ウェブご担当者様が実際に操作する画面になると思います！ MovableTypeの管理画面こちらがMovableTypeの管理画面です。左メニューの「コンテンツデータ」を見ると「コラム」「コラムバナー」「導入事例」「最新情報」・・・など様々な記事タイプを設定できます。この記事タイプの事を「コンテンツ」と呼びます。MovableType7から新たに登場した機能です。試しに「最新情報」をクリックしてみると作成した記事が一覧で表示されます。こちらの最新情報では「タイトル」「本文」「追記」「カテゴリ」の要素を設定できるようにしました。記事を編集するときは青いリンクをクリックします。「news01」の内容を見てみましょう。 ❶「本文」❷「追記」は名前は違いますが、どちらも同じ機能です。ブロックエディタを使って直感的に操作が可能です。表示の出し分けをしやすいように、あえて２つのフォームに分けています。例）一覧画面では「本文」だけ表示。「もっと見る」をクリックで「追記」を表示。など「＋」をクリックする事で画像・見出し・テキスト・埋め込みコード・水平線など追加できます。これらは記事を書く上で必要最低限のシンプルな構成です。他にも利用可能な機能が標準装備されています。カスタマイズが柔軟なWordpressに比べてやや制限のあるMovableTypeですが、フィールドの組み合わせで様々なサイトを構築可能です。（少なくとも記事投稿において不便を感じたことはありません。サーバーの分離でセキュリティ強化！ Wordpressの場合、全てのデータを一つのサーバーに集約させるのが一般的です。シンプルで管理しやすいメリットはありますがサーバーを攻撃された際にデータが破壊・改竄されたり顧客データの情報漏洩に繋がるリスクがあります。「MovableType.net」や「MovableType（ソフトウェア版）」もこの点においては同じです。そこで「MovableType（クラウド版）」の出番です。「サーバーは別々」「表示は一つのサイト」という構成にする事でセキュリティレベルごとの運用が可能です。例えば「ライターに記事を書いてもらいたい。でも大事なデータがサーバにあるから不安・・・」といった課題を解決できるでしょう。
2023.10.24

アクセシビリティ

ユーザビリティ

ウェブアクセシビリティとセマンティックHTMLとの重要性

ウェブアクセシビリティとは？ホームページを利用している全ての人が、心身の条件や利用する環境に関係なく、ホームページで提供されている情報や機能に支障なくアクセスし、利用できること外務省のホームページ「ウェブアクセシビリティ」セマンティックHTMLとは何か？セマンティックHTML（Semantic HTML）は、HTML要素を適切な意味付けや意味論的な構造で使用することを指します。つまり、コンテンツの性質や構造を正しく示すことができるHTMLマークアップを使用することです。セマンティックHTMLは、ウェブサイトの検索エンジン最適化（SEO）や開発者、そして最も重要なのはユーザー体験（UX）に対して大きな影響を持ちます。セマンティックHTMLの利点検索エンジン最適化（SEO）：セマンティックHTMLは、検索エンジンがウェブサイトの内容を正しく理解し、適切にインデックスできるように助けます。適切なタグや要素を使用することで、ウェブサイトのランキング向上に寄与します。アクセシビリティ向上：セマンティックHTMLは、スクリーンリーダーやその他のアシストテクノロジーを使用するユーザーにとっても非常に重要です。適切なマークアップを持つウェブサイトは、視覚障害者や身体障害者などのユーザーがサイトを理解しやすくします。コードの保守性：適切なセマンティックHTMLを使用すると、コードの読みやすさが向上し、他の開発者がコードを理解し、修正するのが容易になります。アクセシビリティの重要性アクセシビリティは、ウェブサイトやアプリが全てのユーザー、特に身体的、認知的、感覚的に障害のある人々にとって利用可能であることを保証する原則です。アクセシビリティを考慮することは、包括的なデザインとユーザー体験を提供することに繋がります。全てのユーザーにアクセスを提供：アクセシビリティを考慮したウェブサイトは、誰もが情報やサービスにアクセスできるようになり、社会的な包摂を促進します。法的規制への適合：多くの国や地域で、ウェブサイトはアクセシビリティ基準を満たす必要があるという法的規制が存在します。アクセシビリティを考慮することは、法令遵守の観点からも重要です。ポジティブなイメージ構築：アクセシビリティを重視することは、企業や団体にとって社会的責任を果たし、ポジティブなイメージを構築する手助けになります。ウェブアクセシビリティ関連の規格 WCAG（Web Content Accessibility Guidelines） WCAG（Web Content Accessibility Guidelines）は、ウェブアクセシビリティの国際的な標準で、W3C（World Wide Web Consortium）によって策定されました。WCAGは、ウェブコンテンツのアクセシビリティに関する指針を提供し、視覚的、聴覚的、運動能力、認知的な障害を持つユーザーがウェブコンテンツにアクセスできるようにする方法について詳細に説明しています。 WCAGは、以下の4つの主要な原則に基づいています：知覚可能性（Perceivable）：ユーザーがウェブコンテンツを知覚できるようにする。操作可能性（Operable）：ユーザーがウェブコンテンツを操作できるようにする。理解可能性（Understandable）：ユーザーがウェブコンテンツを理解できるようにする。堅牢性（Robust）：異なるユーザーエージェントやアシストテクノロジーとの互換性を確保する。 Web Content Accessibility Guidelines (WCAG) 2.0 は、ウェブコンテンツをよりアクセシブルにするための広範囲に及ぶ推奨事項を網羅している。このガイドラインに従うことで、全盲又はロービジョン、ろう又は難聴、学習障害、認知障害、運動制限、発話困難、光感受性発作及びこれらの組合せ等を含んだ、様々な障害のある人に対して、コンテンツをアクセシブルにすることができる。又、このガイドラインに従うと、多くの場合、ほとんどの利用者にとってウェブコンテンツがより使いやすくなる。https://waic.jp/translations/WCAG20/Overview.html ISO/IEC ISO/IEC は、WCAG 2.0の国際規格版です。WCAG 2.0と同様のガイドラインと原則を提供しており、国際的なウェブアクセシビリティの基準として採用されています。この規格は、ウェブ開発者やウェブデザイナーに対して、アクセシビリティを確保する方法を示しています。 JIS X JIS X は、日本のウェブアクセシビリティに関する規格です。この規格は、WCAG 2.0を基にして日本の文化や法律に適した形でアクセシビリティを確保する方法を提供しています。日本国内のウェブサイトやウェブアプリケーションに関するアクセシビリティを向上させるための指針を示しています。これらの規格は、ウェブ開発者やデザイナー、ウェブサイト所有者が、包括的なウェブアクセシビリティを実現するための指針として参照できる重要な文書です。ウェブサイトを開発する際には、これらの規格に準拠することが、より多くのユーザーに対してアクセス可能なウェブ環境を提供する鍵となります。まとめセマンティックHTMLとアクセシビリティは、ウェブデザインの基本的な原則であり、ユーザー体験の向上や包括的なアクセスを提供することを可能にします。これらの原則を遵守することで、ウェブサイトはより多くの人々に価値ある情報やサービスを提供し、より持続可能で包括的なオンラインコミュニティを築く手助けとなります。
2023.10.23

デザイン

入稿データでAdobe XDが人気の理由

デザインデータはPhotoShopからXD・Figmaへコーディングをご依頼いただく際、クライアントによって様々な入稿形式でご依頼をいただきます。以前はPhotoshopが主流の中で、たまにJPGや手書きのラフ画をベースに写真だけ別途お送りいただいて頑張ってコーディングで再現することもありました。現在多くの案件はAdobe XD・Figmaでいただいております。今回はAdobe XDについてメリットをご紹介します。 PhotoshopよりもAdobe XDの方が圧倒的に作業効率が良いです。これはコーダー目線はもちろんクライアントにとってもメリットが多いのでその理由についてご紹介します。全体像を把握できる Photoshopが1ページにつき1ファイルでデザインデータを作成するのに対して、Adobe XDは全ページを1ファイルで管理できる為、サイトの全体像を把握しやすいです。全体像が見えることで以下のようなメリットがあります。・全体の作業ボリュームを算出しやすい・デザインの統一感を確認しやすい・必要なページを精査しやすい動作が軽い Adobe XDのメリットは全体像を俯瞰できる点を述べましたが、ではページの細部をチェックする事には不向きではないか？と思う人もいるかもしれません。 Adobe XDではCommand（windowsの場合はコントロール）を押しながらマウスをスクロールするだけで、滑らかに画面のズームイン・ズームアウトが可能です。 UI・UXはズームアウトして全体像を確認し、細かなグラフィックはズームインしてチェックすると良いでしょう！レイヤーの管理が不要 Photoshopの場合「レイヤーを選択してから編集」が一般的な手順だと思います。その為レイヤー構造が複雑になりレイヤーの管理自体に工数が莫大に発生しがちです。一方Adobe XDはオブジェクトをクリックして直感的に編集できる為、どれだけ凝ったデザインになってもどこのレイヤーに入ってたかな？という考えもいらずシームレスに作業が可能です。キャンバスの余白にはやり取りメモも Photoshopはあくまでグラフィックに特化したソフトですので細かな指示や質問はメールや管理ツールに頼るしかありませんでしたが、Adobe XDは直接ファイルにメモを書き込む事ができる為、どの部分に対しての指示なのかが直感的にわかる点も優れています。詳細な画像加工はやっぱりPhotoshop 逆にAdobe XDは写真の加工などには不向きです。簡単なトリミング・ドロップシャドウ・角丸加工などはAdobe XD側で手軽にできますが、写真の合成や詳細な色調整などはやはりグラフィックに特化したPhotoshopで行った方が良いです。会議用資料やマニュアルもAdobe XDの方が楽少し前まで会議用資料やマニュアルはPowerPointで作るのが主流でした。PowerPointもオブジェクトをクリックして直感的に操作ができる点は非常に優れているのですが、Adobe XDは直感的な操作に加えて大きな描画エリアで全体を見ながら資料を作成できる点が大きな魅力です。
2023.10.22

SNS

効果的なSNS（ソーシャルメディア）運用のポイントと戦略

SNS（ソーシャルメディア）の重要性と役割近年、SNSは個人だけでなく、企業や団体にとっても欠かせないマーケティングツールとなっています。SNSは、ブランドの知名度向上、顧客とのコミュニケーション強化、商品やサービスのプロモーション、顧客の意見やフィードバックの収集など、多岐にわたる役割を果たしています。 SNS運用の基本戦略 1. ターゲットオーディエンスの特定 SNS運用を始める前に、自身のターゲットオーディエンスを明確にしましょう。誰に向けてコンテンツを提供するのかを理解することは、戦略の基盤です。 2. 適切なSNSプラットフォームの選定どのSNSプラットフォームを使用するかは、ターゲットオーディエンスと提供するコンテンツによって異なります。例えば、ビジュアル系のコンテンツならInstagramやPinterest、ビジネス向けのコンテンツならLinkedInが適しています。 3. コンテンツの質とクオリティの向上 SNS上での成功は、魅力的で価値あるコンテンツの提供にかかっています。文章や画像、動画など、メディア形式を工夫し、ユーザーを引きつける魅力的なコンテンツを投稿しましょう。 4. 定期的な更新と相互作用 SNSは定期的な更新が求められます。定期的な投稿やユーザーからのフィードバックに対する返信は、コミュニティの信頼を築く上で非常に重要です。 SNS運用の成功事例と学び 1. リアルタイムマーケティングの活用イベントやトレンドに即座に対応することで、SNS上での話題性を高め、注目を集めることができます。有名なイベントや話題のトピックに結びつけたコンテンツは、ユーザーエンゲージメントを向上させる手法です。 2. ストーリーテリングの力ストーリーテリングは、ユーザーに感情的なつながりを提供し、ブランドのストーリーを伝える手法です。心に響くストーリーは、ユーザーの共感を呼び起こし、長期的なファンを獲得するのに役立ちます。 3. データ分析と改善 SNS運用の成果は、データ分析を通じて測定し、評価する必要があります。どの投稿が最も効果的だったのか、ユーザーの反応はどうだったのかといった情報を基に戦略を改善しましょう。トレンドのSNSプラットフォームと活用方法 1. Instagram（インスタグラム） Instagramは写真と短い動画を共有するプラットフォームとして非常に人気があります。ビジュアルなコンテンツが得意で、若年層を中心に幅広いユーザーベースを持っています。Instagramでは、ストーリーズ（一時的な投稿）、IGTV（長尺動画の共有）、リールズ（短い動画の投稿）といった機能を活用することで、多様なコンテンツを提供できます。 2. Facebook（フェイスブック） Facebookは世界最大のSNSプラットフォームであり、幅広い年齢層のユーザーが利用しています。Facebookページを作成することで、企業や団体はブランドの情報を共有し、コミュニティを築くことができます。Facebook広告も非常に効果的であり、ターゲットオーディエンスに広告を効果的に配信することができます。 3. TikTok（ティックトック） TikTokは短い音楽付き動画を共有するプラットフォームで、特に若年層を中心に急速に人気を集めています。15秒から1分程度の短い動画を作成し、クリエイティブなコンテンツを提供することが求められます。ブランドや製品のプロモーションにも活用され、アクセス数が多いため、広告主にとって魅力的なプラットフォームとなっています。 4. X（エックス旧ツイッター） Xは短文のつぶやき（ツイート）を共有するプラットフォームで、リアルタイムの情報発信やトレンドの追跡に適しています。企業やブランドは、ニュースやイベントの告知、ユーザーとの対話を通じてコミュニケーションを図ることができます。ハッシュタグの活用やリツイートを通じて、情報を拡散することができます。結論 SNS運用は単なる情報発信ではなく、効果的なコミュニケーションとマーケティングの手段です。適切な戦略を持ち、定期的な改善を行いながら、SNSを活用してターゲットオーディエンスとの繋がりを深め、ブランドの成功を築いていくことが求められます。