投稿者: 工藤

Webサイト制作
制作会社が考える、WordPressとオリジナルCMSの選定ポイント

弊社では「WordPress」を使った制作と、弊社のオリジナルCMSツール「ProG(プログ)」を使った制作の、いずれについても多くのご相談をいただいています。 それぞれにメリットがある一方で、運用時に気を付けるべき点もあり、サイトの目的や運用方法によって向き・不向きがあります。 この記事ではそれぞれの特徴を整理しながら、WordPressとオリジナルCMSを併用できるケースについてもご紹介します! WordPressを使用するメリット WordPressとは、ホームページや […]

WordPress
本当に使う機能だけを残した、シンプルなWordPressのSEOプラグインを作成しました

WordPressでSEO周りの設定が簡単にできる、SEOプラグイン。 SEO対策には便利ですが、設定項目が多すぎて「どこを触ればいいのか分からない」と感じることはないでしょうか? そこで今回、社内の案件用にシンプルなSEOプラグインを作成してみました。 『最低限の設定のみでシンプルに』というのが今回のテーマです。 今回の記事では「どんな考え方で設計したのか」といった、制作背景などを紹介していきます。 ※本記事ではコードの全公開やダウンロードは行いません 追記:無事リリースで […]

Webサイト制作
WordPress納品後にクライアントが安心して運用できる仕組みづくりをしよう

ホームページ制作において、更新機能を手軽に導入できるのがWordPressです。 専門知識がなくても記事の投稿やページ編集を行いやすい一方で、クライアントが自分で運用するには、が欠かせません。 今回は、そのための仕組みづくりについてご紹介します。 制作側の方はもちろん、クライアント側でホームページ運用を担当される方も、制作時のご相談などにぜひ参考にしてみてください。 管理画面のロゴを企業ロゴに変更する 更新とは大きく関係はないですが、みましょう。 デフォルトのWordPres […]

マークアップ
コーポレートサイトのアクセシビリティ、どこまで対応すべき?

コーポレートサイトにおける。 重要だと分かっていても、コーポレートサイトにどこまで反映すべきかは悩みどころではないですか? 今回は、現実的に取り組みやすい部分と、対応が難しい部分を整理してご紹介します。 一概にこれが正解、というわけではありませんが、悩んでいる方の参考になればと思います。 コーポレートサイトでの達成基準は? アクセシビリティ対応においては、国際的なウェブアクセシビリティ基準であるWCAG(Web Content Accessibility Guidelines […]

マークアップ
WEBサイトのアクセシビリティ対応をしてみよう!【ダイアログ(モーダルウィンドウ)編】

以前公開した WEBサイトのアクセシビリティ対応では、全体的な考え方について触れました。 今回はその中でも利用頻度の高いダイアログ(モーダルウィンドウ)に焦点を当てて解説します。 ダイアログは、入力フォームの送信確認や画像の拡大表示など、Webサイトでよく利用される便利な仕組みです。 しかし、アクセシビリティ対応が不十分なまま実装されるケースも少なくありません。 特にキーボードだけで操作するユーザーや、スクリーンリーダーを利用するユーザーにとっては、誤ったダイアログの実装が操 […]

WordPress
アンケートフォームをホームページに設置できるWordPressプラグインの活用事例4選

WordPressでアンケートフォームを作成したい!けれどきちんと日本語対応しているプラグインが見つからない…と思ったことはありませんか? 弊社でリリースをしたフォーム作成作成プラグイン「Easy Form Maker」であれば、完全日本語対応で、通常のお問い合わせフォームだけでなく、アンケートフォームの作成を行うことができます。 今回は、実際にどんなアンケートフォームが作成できるかご紹介します。 Easy Form Makerって? まずはEasy Form Makerにつ […]

WordPress
カレンダーをホームページに表示できるWordPressプラグインの活用事例4選

イベントのお知らせをカレンダー形式で掲載したいけれど、なかなかWordPressの日本語プラグインでピッタリなものが見つからない…と思ったことはありませんか? 弊社でリリースをしたWordPressのイベントカレンダープラグイン「Event Calendar Maker」であれば、完全日本語対応で、ホームページ上に簡単にイベントカレンダーを掲載することができます。 今回は、実際にどんなシーンでこのカレンダーが活用できるのかをご紹介します! Event Calendar Mak […]

スマホアプリ
高齢者を見守るアプリ「みまもりシルバー」をリリースしました!

高齢のご家族が外出中、いつもと違う時間に帰ってこないと、ちょっとした不安が頭をよぎることはありませんか? 「道に迷っていないかな」「転んでいないかな」…心配事はなかなか尽きないですよね。 そんな心配をすぐに解消できるGPS見守りアプリ「みまもりシルバー」をリリースしました。 メールアドレスなどによる会員登録やサービス契約は不要!基本無料で、かんたんに使うことができます。 この記事では、アプリの魅力や使い方を詳しくご紹介します。 みまもりシルバーはなにができるの? みまもりシル […]

WordPress
WordPressで権限やユーザーごとに管理画面のサイドメニュー表示を切り分ける

デフォルトだといろいろな項目が表示されているWordPressの管理画面のサイドメニュー。 慣れていない人にはわかりづらいですよね。 また、権限によってデフォルトで非表示にしてくれたりもしますが、この部分は見せたくないな…ということも多いと思います。 今回はWordPressで権限やユーザーごとにサイドメニューの表示を変更する方法をご紹介します。 権限の種類について まずはデフォルトの権限の種類についてご紹介します。 基本的には5つの権限が用意されています。 この権限を使用し […]

スマホアプリ
お子さまの安全を守るアプリ「みまもりキッズ」をリリースしました!

お子さまが学校や習い事、遊びに出かけたあと、「ちゃんと安全に過ごしているかな?」と心配になったことはありませんか? 不審者による事件が後を絶たない昨今、お子さまの安全を守るために、常に高い意識を持たれている保護者の方も多いのではないでしょうか。 そんな中、親子の安心をサポートする新しいアプリ「みまもりキッズ」が登場しました! 基本無料で、カンタンに使うことができます。 この記事では、アプリの魅力や使い方を詳しくご紹介します。 みまもりキッズは何ができるの? みまもりキッズを使 […]

WordPress
WordPressのアクセス解析プラグイン「Simple Analytics」をリリースしました!

WordPressのアクセス解析プラグイン「Simple Analytics」をリリースしました! ※この記事は2024年10月現在の情報です。 Simple Analyticsとは? 「Simple Analytics」はGoogle Analyticsと連携して簡単にアクセス解析ができる、WordPressプラグインです。現在は日本語にのみ対応しています。 このプラグインをサイトに導入すると、Google Analyticsにログインすることなくアクセス解析をWordPr […]

WordPress
WordPressの会員限定記事配信プラグイン「Limited Post Maker」をリリースしました!

WordPressの会員限定記事配信プラグイン「Limited Post Maker」をリリースしました! ※この記事は2024年10月現在の情報です。 Limited Post Makerとは? 「Limited Post Maker」はオウンドメディアやブログで会員限定の記事を配信できる、WordPressプラグインです。現在は日本語にのみ対応しています。 WordPressで作成をした記事に対してショートコードを記述するだけで、簡単に会員限定購読の記事を配信することがで […]

WordPress
WordPressのフォームプラグイン「Easy Form Maker」をリリースしました!

WordPressのフォームプラグイン「Easy Form Maker」をリリースしました! ※この記事は2024年10月現在の情報です。 Easy Form Makerとは? 「Easy Form Maker」はお問合せやアンケートなどのフォームをWebサイト上に簡単に設置できる、WordPressプラグインです。現在は日本語にのみ対応しています。 WordPressの管理画面でフォームを作成するとショートコードが生成され、表示をさせたい場所にコードで記述をするだけで簡単に […]

WordPress
WordPressの予約プラグイン「Reserve Calendar Maker」をリリースしました!

WordPressの予約プラグイン「Reserve Calendar Maker」をリリースしました! ※この記事は2024年10月現在の情報です。 Reserve Calendar Makerとは? 「Reserve Calendar Maker」は予約フォームと連携したカレンダーを設置できる、WordPressプラグインです。現在は日本語にのみ対応しています。 WordPressの管理画面でイベントを登録。そしてそのイベントは予約フォームと連携した形になっていて、ユーザー […]

WordPress
WordPressのイベントカレンダープラグイン「Event Calendar Maker」をリリースしました!

WordPressのイベントカレンダープラグイン「Event Calendar Maker」をリリースしました! ※この記事は2024年10月現在の情報です。 Event Calendar Makerとは? 「Event Calendar Maker」はイベントカレンダーをWebサイト上に簡単に設置できる、WordPressプラグインです。現在は日本語にのみ対応しています。 WordPressの管理画面で簡単にカレンダーを作成して、イベントを登録することができます。 イベント […]

Webサイト制作
Webアクセシビリティの基本を学ぼう!

近年Webサイト制作時に求められる『Webアクセシビリティ』。 正直なんだかよくわからない、ややこしそうだなあと思う方も多いと思います。 自分も勉強中ではありますが、今回は対応しやすそうな内容をなるべくわかりやすくまとめてみました。 一緒にWebアクセシビリティについて学んでいきましょう。 そもそもWebアクセシビリティってなに? 『Accessibility』はweb関連で日本語で翻訳したときに「アクセス可能性」「アクセスのしやすさ」などの意味があります。 Webアクセシビ […]

マークアップ
疑似クラス:has()を活用してみよう!

CSSの疑似クラスである:has()がようやく全ブラウザに対応してくれました! 「:has()ってなんだ?」という方もいらっしゃるかもしれません。 例えば通常は水色のボックスである『#abc』の中に『.xyz』が現れると『#abc』の背景をピンクにする、ということができます。 これまでは親要素に対して子要素が影響を与えることはJavaScriptなどに頼る必要があり、cssのみでは困難でした。 けれど:has()すべてを解決してくれます。 活用方法-チェックボックスの装飾 個 […]

マークアップ
【CSSのみ】スムーススクロール+アンカーリンク時の固定ヘッダーのずれを調整

今までの流れで、何となくスムーススクロールやアンカーリンク時の固定ヘッダーのずれをjsなどで処理していませんか? 実はCSSのみで対応できるようになっています。 主要なブラウザには対応していて、なおかつ簡単にできるので、ぜひ使っていきましょう。 CSSだけでスムーススクロールをする まずはcssだけでスムーススクロールをする方法についてご紹介します。 といっても1行書くだけです。 このようにhtml要素に対してscroll-behavior: smooth;と指定するだけです […]

Webデザイン
【Photoshop】生成塗りつぶしを使ってみよう【AI】

Photoshop 2024(ver.25)から本格的にAIによる生成機能が追加されました。 今回はどんなことができるか、基本的なものをご紹介していきます。 対象のものを削除したい ではまず、対象のものを削除する方法です。 Photoshop 2024(ver.25)で生成塗りつぶしに使いたい画像を開きましょう。 画像を開いたら、削除をしたいものを選択ツールを使用して範囲選択します。 範囲を選択したらコンテキストタスクバーが表示されるので、『生成塗りつぶし』をクリックします。 […]

マークアップ
実際のサンプルでアニメーション解説 [オープンキャンパス特設サイト]【CSS/JS】

WEBサイト作成時にこのアニメーションがよくわからない…ということがあると思います。 今回は弊社で作成した『受験生向け女子大学のオープンキャンパス特設サイト』のサンプルを使用しながら解説していきます。 初歩的なアニメーションの知識はある、という方向けの記事です。 参考にするサンプルサイトはこちらから inview.jsを読み込ませる 今回は場所によっては『inview.js』というライブラリを読み込ませて、使用しています。 これを使うとスクロールをして表示領域に入った時にイベ […]

マークアップ
実際のサンプルでアニメーション解説 [焼肉用のお肉ネット通販特設サイト編]【CSS/JS】

WEBサイト作成時にこのアニメーションがよくわからない…ということがあると思います。 今回は弊社で作成した、[焼肉用のお肉ネット通販特設サイトのサンプルを使用しながら解説していきます。 初心者向けの記事です。 参考にするサンプルサイトはこちらから 動画再生 メインビジュアルで動画を再生させています。 JSなどで再生させる方法もありますが、今回はCSSだけで対応してみます。 HTML CSS とりあえずvideoタグで動画を設置します。 #mainVisualで大元を括ります。 […]

マークアップ
実際のサンプルでアニメーション解説 [ホームセキュリティ編]【CSS/JS】

WEBサイト作成時にこのアニメーションがよくわからない…ということがあると思います。 今回は弊社で作成した、ホームセキュリティサイトのサンプルを使用しながら解説していきます。 初心者向けの記事です。 参考にするサンプルサイトはこちらから inview.jsを読み込ませる 今回は場所によっては『inview.js』というライブラリを読み込ませて、使用しています。 これを使うとスクロールをして表示領域に入った時にイベントを発生させることができます。 一緒にjqueryの読み込みも […]

マークアップ
実際のサンプルでアニメーション解説 [採用サイト編]【CSS/JS】

WEBサイト作成時にこのアニメーションがよくわからない…ということがあると思います。 今回は弊社で作成したサンプルを使用しながら解説していきます。 初歩的なアニメーションの知識はある、という方向けの記事です。 参考にするサンプルサイトはこちらから inview.jsを読み込ませる 今回は場所によっては『inview.js』というライブラリを読み込ませて、使用しています。 これを使うとスクロールをして表示領域に入った時にイベントを発生させることができます。 一緒にjqueryの […]

マークアップ
Intersection Observer APIを使って要素をアニメーションをさせてみる【初めての人向け】

今回はIntersection Observer APIを使用してのアニメーションの方法をご紹介します。 正直この記事を書いている私も今手探りの状態なので、完全に初心者の方向けの記事です。 一緒に勉強していきましょう。 Intersection Observer APIってなに? まずIntersection Observer APIってなに?という方もいると思います。 日本語交じりで言うと『交差オブザーバー』。 上記仕様書から抜粋すると 交差オブザーバー API (Inte […]

マークアップ
スクロールバーをCSSで装飾しよう!【chrome・edge・Firefox】

CSSでのスクロールバーの装飾。 以前はchromeとあたりの対応だけだったのが、いつの間にかFirefoxも対応していたので今更感もありますがまとめておきます。 chrome・edge・safari まずは手始めにchrome・edgeの方法をご紹介します。 See the Pen Untitled by kkdd (@kk8kk) on CodePen. コードとしてはこんな感じです。注釈で書いてある通りですが ::-webkit-scrollbar ここでスクロールバー […]

1 2 3 9