レスポンシブなクリッカブルマップを作成してみました

先ほどクラウドワークスで以下のような仕事がありました。 この仕事をこなすには、レスポンシブな日本地図を作成する必要があるので、そのやり方を調べて実際に試してみました。 以前、日本地図にリンクを設定する方法という記事を作成 …

フリーランスWEB制作、駆け出しのときに作成した模写サイトを公開します。

私は、2019年末にプログラミングスクールTECH::EXPERTを経験した後、2020年5月ごろ2つの模写コーディングを行いました。 そのサイトを公開したいと思います。 MUJI HOTEL GINZA ユーザー名 パ …

ローディングアニメーションを作成してみた

年末あたりに、知り合いのWEBデザイナーさんからコーディングの依頼が来ると思います。 事前準備として、jQueryを使用したローディングアニメーションの学習ブログを書いておきます。 ローディングアニメーションとは? こち …

【Google AdSense】要注意 – 収益に重大な影響が出ないよう、ads.txt ファイルの問題を修正してください。

GoogleAdSenceの管理画面で、「要注意 – 収益に重大な影響が出ないよう、ads.txt ファイルの問題を修正してください。」と警告が出ていました。 この記事では、ググりながら解決に向けて取り組んだ …

レスポンシブコーディングではコンテナをしっかりと設定しよう

私はこれまでにWEBサイトのレスポンシブコーディングを行ってきました。 レスポンシブコーディングとは、スマホ・タブレット・ノートパソコン・大きい画面などの様々な画面幅に対応させるコーディング手法です。 レスポンシブコーデ …

親テーマの内容を子テーマに移行した

先日、フリーランス仲間のデザイナーさんから「WordPressの親テーマに書いてある内容を子テーマに移行して欲しい」というご依頼を受けました。 予算は、6,600円(税込)でその日のうちに対応させていただきました。 素敵 …

Illustratorから画像を書き出す方法

先日行ったLPのコーディングで、Illustratorのデザインからコーディングを行いました。 これまではadobeXDからコーディングすることが多かったので、Illustratorから画像を書き出すときに少し苦戦しまし …

主要なブラウザについて調べてみた

本記事では、多くの人が利用している以下のブラウザについて調べたことを簡単に書いていきます。 ちなみに普段私は、MacBookではChrome、iPhoneではSafariを使用しています。 Chrome ChromeはG …

reCAPTCHA V3をMW WP Formに導入しました

先日地元のWEB制作会社の担当者の方から迷惑メール対策のために既存のフォームをmw formで作り替えて、reCAPTCHA V3を設定して欲しいというご依頼を受けました。 用語説明 MW WP Formとは MW WP …

トップページのフォーム部分にエラーメッセージが表示されている問題を解決した

いつもお世話になっている地元名古屋のWEB制作会社の担当者の方から、WordPressのサイトのトップページのフォームにエラーメッセージが出ているので解決してほしいというご依頼を、chatworkで受けました。 発生して …

display: grid; の基礎

私はこれまでdisplay: flexを使用してレイアウトを整えてきましたが、最近display: gridを使用する機会がありました。 スマホで親要素に以下のようなCSSを書き、 以下のようなレイアウトを実現したわけで …

横スクロールできるコンテンツの作成方法

先日、本サイトのトップページのブログコンテンツを横スクロールできるようにしました。 本記事では、横スクロールできるコンテンツの作成方法を紹介します。 検証してみると googleの検証ツール(デベロッパーツール)を使用し …

ドメイン移管後のメールフォームプロCGIの不具合を解消した

先日、地元のWEB制作会社さんから依頼されたサイトの最適化を行った際に、ドメイン変更して以前のドメインから最新のドメインにリダイレクトをかけました。 それで納品したところ、先方からフォームが送信できなくなっているという連 …

古いサイトをgoogle検索結果に表示されないように

先日クライアントさんが保有しているサイトの中でしばらく使っていないサイトがありgoogleの検索結果から削除して欲しいというご依頼がありました。ご要望としては、アドレスバーに打ち込んだ時は表示されるが、検索結果では表示さ …

FutureShopの固定ページのコーディングを行った(2回)

先日地元のWEB制作会社さんからFutureShopの新規ページ作成のコーディングをご依頼いただけました。AdobeXDのデザインデータがすでにあり、それを元に構築していくという内容でした。先月と今月の2回続けて対応しま …

YouTubeのポップアップモーダルを作成する方法

現在取り組んでいるLPコーディングで、YouTubeをポップアップモーダルで表示するという仕様を実現したので、それについて書いていきます。 「modaal」というモーダルウインドウのプラグインを使用しました。 デモサイト …

背景のアニメーション

背景のアニメーションをいくつか作成してみました。 「動くWebデザイン」を参考にしました。 star 星のアニメーションです。サンプルサイトはこちら confetti 紙吹雪のアニメーションです。サンプルサイトはこちら …

Sassでブレイクポイントを指定する方法

SassはCSSを効率的に書くことのできる言語です。 ブレイクポイントとは、レスポンシブなサイトをコーディングする際に、どの画面幅でCSSを切り替えるのかを指定する値です。 本記事では、Sassでブレイクポイントを指定す …

twigの文法

私は普段、EC-CUBEというオープンソースのECシステムで作成されたサイトの改修を行なっています。 EC-CUBEでは、twigというPHPのテンプレートエンジンが使用されています。 拡張子は、.twigです。 そんな …

XDデザインデータからの1ページ静的サイトコーディング

クラウドワークスで応募して1ページ静的サイトのコーディングを任せていただけました。 AdobeXDのデザインデータからで、レスポンシブ対応で構築しました。 画像はWebp対応を行いました。 公開サイト こちらが公開された …

キャッシュについて

キャッシュは、ブラウザがCSSや画像などのデータを一時的に保存しておく仕組みです。 キャッシュが残っていると、CSSや画像を変更しても、「以前のデータが残っていて、変更が反映されない」といったことが起こります。 ブラウザ …

Shopifyとは?実際に試してみた

数年前からよく耳にする「Shopify」についてまとめてみたいと思いました。(※音楽ストリーミングサービスのSpotifyではありません。) 実際にアカウントを作成して、14日間無料トライアルしてみて分かったことをまとめ …

デザインカンプを作ってみます

これまでに、WEBデザインを作成する機会があまりなかったので、WEBデザインもやってみようと思いました。 そこで、こちらの参考サイト(PLANT)をXDで再現してみます。 PLANTとは ” PLANTは、ブ …

レスポンシブコーディングのコツ3選

こんばんは。今回は、HTML / CSSを使用したコーディングでレスポンシブ(スマホ・タブレット対応)なコーディングを実現するためのコツを3つに絞って書いていきます。 ※レスポンシブについての最新記事(2022年11月3 …

売れる商品画像の作り方

先日、有り難いことに商品画像を作成する機会を頂けたので、売れる商品画像の作り方についてググりました。その中で得られた情報をまとめてアウトプットしていきます。 実物を手に取れない代わりに ECサイトでは実店舗のように実物に …

ECサイトを分析しました

長崎県にある陶器屋さんaiyu(アイユー)のECサイトが、情報量が多いにも関わらずきれいにまとまっていたので、分析したいと思います。 PCヘッダーは、メガメニュー パソコンで、マウスホバー時に大きなメニューが表示される仕 …

E-A-Tについて

E-A-Tとは、SEOで重要なExpertise(専門性が高い)・Authoritativeness(権威性がある)・Trustworthiness(信頼できる)の英語の頭文字をとった言葉です。 実際に私が担当したWEB …

デザイン4原則

ノンデザイナーズブックで学んだ「デザイン4原則」について、実際のサイトを例に挙げながら解説していきます。 デザイン4原則とは、以下です。 近接 関連している要素同士は近くに置くことで、関連性を示すことができます。 例えば …

ページ
最上部へ

目次へ