サイト制作についての記事

ACFの画像フィールドを使用して、アップした画像が固定ページに反映されるようにする方法

先日、CW(Crowd Works)で、「現在はCSSで背景画像が設定されているが、管理画面から画像を差し替えできるようにしたい」というご要望を受けました。 6月25日の締め切りで進めていくということに決まったので、事前準備として記事を書いていこうと思います。 使用したプラグイン ACF(Advanced Custom...

先日、CW(Crowd Works)で、「現在はCSSで背景画像が設定されているが、管理画面から画像を差し替えできるようにしたい」というご要望を受けました。 6月25日の締め切りで進めていくと...

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

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

先ほどクラウドワークスで以下のような仕事がありました。 https://crowdworks.jp/public/jobs/8744105 この仕事をこなすには、レスポンシブな日本地図を...

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

私は、2019年末にプログラミングスクールTECH::EXPERTを経験した後、2020年5月ごろ2つの模写コーディングを行いました。 そのサイトを公開したいと思います。 MUJI HOTEL GINZA https://ki-hi-ro.com/reproduce/Muji-Hotel/ ユーザー名パスワードk...

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

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

年末あたりに、知り合いのWEBデザイナーさんからコーディングの依頼が来ると思います。 事前準備として、jQueryを使用したローディングアニメーションの学習ブログを書いておきます。 ローディングアニメーションとは? こちらのユナイテッドアローズを開いたときに表示されるような、画面読み込み時に発生するアニメーションのこと...

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

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

私はこれまでにWEBサイトのレスポンシブコーディングを行ってきました。 レスポンシブコーディングとは、スマホ・タブレット・ノートパソコン・大きい画面などの様々な画面幅に対応させるコーディング手法です。 レスポンシブコーディングを行う上で重要なことはいくつかありますが、この記事では、コンテナをしっかりと設定しましょうというお話...

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

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

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

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

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

先日行ったLPのコーディングで、Illustratorのデザインからコーディングを行いました。 これまではadobeXDからコーディングすることが多かったので、Illustratorから画像を書き出すときに少し苦戦しました。 今はIllustratorからの画像書き出しにも慣れてきたので、方法をまとめていきます。 全体...

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

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

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

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

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

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

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

display: grid; の基礎

私はこれまでdisplay: flexを使用してレイアウトを整えてきましたが、最近display: gridを使用する機会がありました。 スマホで親要素に以下のようなCSSを書き、 .親要素のクラス名 { display: grid; grid-template-columns: 1fr 1fr; g...

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

有料老人ホームのサイトにコンテンツを追加しました

地元名古屋のWEB制作会社で以前からお世話になっている担当者の方からchatworkで「有料老人ホームのサイトのコンテンツ追加のコーディングを行ってほしい」というご依頼を受けました。 コーディング内容 すでに稼働している本番サイトの下層にdevというフォルダを作成して、そこにファイル一式を配置し、そのテスト環境で作業を行いま...

地元名古屋のWEB制作会社で以前からお世話になっている担当者の方からchatworkで「有料老人ホームのサイトのコンテンツ追加のコーディングを行ってほしい」というご依頼を受けました。 コーディ...

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

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

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

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

先日、地元のWEB制作会社さんから依頼されたサイトの最適化を行った際に、ドメイン変更して以前のドメインから最新のドメインにリダイレクトをかけました。 それで納品したところ、先方からフォームが送信できなくなっているという連絡を受けました。 原因は、使用していたメール機能の「メールフォームプロCGI」のパーミッションが変更されて...

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

ECサイトのトップにカテゴリーから選択できるコンテンツを追加した

地元のWeb制作会社の担当者の方から、chatworkで相談を受けて、ECサイトのトップページにカテゴリーから選択できるコンテンツを作成しました。 私が担当したのは、コーディングです。デザインデータは、担当者の方からいただきました。 対応したサイトはお伝えできませんが、コーディング内容や開発の流れ、料金などについて書いていき...

地元のWeb制作会社の担当者の方から、chatworkで相談を受けて、ECサイトのトップページにカテゴリーから選択できるコンテンツを作成しました。 私が担当したのは、コーディングです。デザイン...

既存買取サイトにLINE査定の撮影のポイントを追加した

既存の買取サイトに「LINE査定の撮影のポイント」というコンテンツを追加するためのコーディングを行いました。 使用しているCMSはWordPressでした。 Photoshopのデザインデータから、画像などの情報を取得して、コーディングしました。 レスポンシブ対応では、PCのデザインを参考にスマホのレイアウトを考えて進...

既存の買取サイトに「LINE査定の撮影のポイント」というコンテンツを追加するためのコーディングを行いました。 使用しているCMSはWordPressでした。 Photoshopのデザイン...

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

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

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

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

先日地元のWEB制作会社さんからFutureShopの新規ページ作成のコーディングをご依頼いただけました。AdobeXDのデザインデータがすでにあり、それを元に構築していくという内容でした。先月と今月の2回続けて対応しました。 必要だった情報 トップページのファイルや画像, CSSをアップロードするためのFTP情報が必要でし...

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

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

現在取り組んでいるLPコーディングで、YouTubeをポップアップモーダルで表示するという仕様を実現したので、それについて書いていきます。 「modaal」というモーダルウインドウのプラグインを使用しました。 デモサイト デモサイトはこちらです。 デモサイトにある画像をクリックすると、以下のような、YouTube...

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

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

SassはCSSを効率的に書くことのできる言語です。 ブレイクポイントとは、レスポンシブなサイトをコーディングする際に、どの画面幅でCSSを切り替えるのかを指定する値です。 本記事では、Sassでブレイクポイントを指定する方法について書いていきます。 結論のコード まずはブレイクポイントを定義して、$br...

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

twigの文法

私は普段、EC-CUBEというオープンソースのECシステムで作成されたサイトの改修を行なっています。 EC-CUBEでは、twigというPHPのテンプレートエンジンが使用されています。 拡張子は、.twigです。 そんなtwigの文法について(フロントエンドのみ)書いていきます。 変数定義 シンプルに代入し...

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

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

クラウドワークスで応募して1ページ静的サイトのコーディングを任せていただけました。 AdobeXDのデザインデータからで、レスポンシブ対応で構築しました。 画像はWebp対応を行いました。 公開サイト こちらが公開されたサイトです。 使用した技術 メインスライドやページ内リンク、スマホハンバーガーメニ...

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

キャッシュについて

キャッシュは、ブラウザがCSSや画像などのデータを一時的に保存しておく仕組みです。 キャッシュが残っていると、CSSや画像を変更しても、「以前のデータが残っていて、変更が反映されない」といったことが起こります。 ブラウザの強制リロードを行いキャッシュを削除するという方法もありますが、全てのユーザーにそれをさせるのは現実的では...

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

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

数年前からよく耳にする「Shopify」についてまとめてみたいと思いました。(※音楽ストリーミングサービスのSpotifyではありません。) 実際にアカウントを作成して、14日間無料トライアルしてみて分かったことをまとめていきます。 最初に行うこと テーマのカスタマイズ、ページ追加、メニューの整理、ロゴ作成、最初の商品...

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

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

これまでに、WEBデザインを作成する機会があまりなかったので、WEBデザインもやってみようと思いました。 そこで、こちらの参考サイト(PLANT)をXDで再現してみます。 PLANTとは " PLANTは、ブランディングを軸にしたコンセプト開発、ロゴやビジネスツールなどのグラフィックデザインと、Webサ...

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

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

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

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

売れる商品画像の作り方

先日、有り難いことに商品画像を作成する機会を頂けたので、売れる商品画像の作り方についてググりました。その中で得られた情報をまとめてアウトプットしていきます。 実物を手に取れない代わりに ECサイトでは実店舗のように実物に触れることができません。そのため、商品画像で質感などの情報をアピールすることが必要です。また、寸法の情報を...

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

ECサイトを分析しました

長崎県にある陶器屋さんaiyu(アイユー)のECサイトが、情報量が多いにも関わらずきれいにまとまっていたので、分析したいと思います。 PCヘッダーは、メガメニュー パソコンで、マウスホバー時に大きなメニューが表示される仕様になっており、バラエティーの豊富さが伝わり、買い物が楽しくなりそうです。 PCフッ...

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

E-A-Tについて

E-A-Tとは、SEOで重要なExpertise(専門性が高い)・Authoritativeness(権威性がある)・Trustworthiness(信頼できる)の英語の頭文字をとった言葉です。 実際に私が担当したWEBサイトでこれらを意識してコンテンツをアップしたところ、検索順位が大幅にアップしました。 本記事では、E-A...

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

デザイン4原則

ノンデザイナーズブックで学んだ「デザイン4原則」について、実際のサイトを例に挙げながら解説していきます。 デザイン4原則とは、以下です。 近接 整列 反復 コントラスト 近接 関連している要素同士は近くに置くことで、関連性を示すことができます。 例えば、画像の赤枠部分は、キャッチコピー...

ノンデザイナーズブックで学んだ「デザイン4原則」について、実際のサイトを例に挙げながら解説していきます。 デザイン4原則とは、以下です。 近接 整列 反復 コントラス...

トップページはこちら

年月アーカイブ

  • 2024年5月 (38)
  • 2024年4月 (40)
  • 2024年3月 (37)
  • 2024年2月 (27)
  • 2024年1月 (35)
  • 2023年12月 (17)
  • 2023年11月 (24)
  • 2023年10月 (7)
  • 2023年9月 (25)
  • 2023年8月 (33)
  • 2023年7月 (12)
  • 2023年6月 (22)
  • 2023年5月 (5)
  • 2023年4月 (20)
  • 2023年3月 (6)
  • 2023年2月 (18)
  • 2023年1月 (25)
  • 2022年12月 (34)
  • 2022年11月 (42)
  • 2022年10月 (14)
  • 2022年9月 (11)
  • 2022年8月 (11)
  • 2022年7月 (7)
  • 2022年5月 (22)
  • 2022年4月 (19)
  • 2022年3月 (12)