はてなブックマーク

Webサイトの制作を進めるために必要なのが「ローカル環境」。 今回は、Dockerを使用してローカル環境を構築する手順を説明します。この手順を実行すると、5分程度で環境構築は完了です。ぜひ、手元のPCで実際に試しながら読んでください。 それでは、始めましょう！ Dockerで構築する環境の概要 今回、Dockerを使用して立てる環境は「LAMP&Wordpress&phpMyAdmin」が揃った環境となっています。 詳細情報は以下の通りです。 PHP 8.0.28 Apache 2.4.56 (Debian) mysql 8.0 Wordpress 6.2 環境構築手順 Dockerによる環境構築は以下の6ステップです。 Docker Desktopをインストール Docker Desktopを立ち上げる docker-compose.ymlファイル入れるディレクトリを作る 環境構築を始め

ChatGPTより上!? Microsoft Bing AIでもっと良質な記事を作成する方法【プロンプトあり】 Web制作ハウツー 特集 ライティング Web最新トレンド 「ChatGPTで記事は書けるというけれど、やってみるとなんか思ってたのと違った。。。」 こんな経験をしたことはないですか？ ブログ記事やYouTubeで、ChatGPTを使った記事の書き方が多数紹介されています。ChatGPT自体のすごさも相まって「これはすごい！　記事書かなくてよくなるかも〜！」と色めきたったのは、私だけではないはず。 でも実際作ってみたら、なんか思っていたのと違っていたんですよね。。。記事の形はしているけれど、わざわざ読みたくなるものではなかったのです。 あえて強い言葉で言えば、「こんなの記事じゃねぇぇぇ！！！」とさえ思いました。 それでいろいろ試してみて、やっとわかったのです。「やり方」と「Cha

この記事では画像生成AI3種でイラストと画像を作って比較しています。 取り上げたサービスは「Stable Diffusion」「Midjourney」「Canva」です。無料で気軽に使い始められるものを選びました。 「とにかくまずは自分で触ってみたい」 「各サービスの違いを先に知っておきたい」 「利用制限なしでどんどん使ってみたい」 という方は、ぜひ最後までお読みください。 画像生成AIを使うときに問題なのが「プロンプト」と呼ばれる命令です。どんな書き方をするかで、AIの示す結果が変わります。 本記事では、話題の人工知能モデル「ChatGPT」を利用してプロンプトを作りました。ChatGPTへの質問文も載せてあるので参考にどうぞ。 ではいってみましょう。 今回やってみたこと ビジネス系のお役立ち記事を想定し、アイキャッチに使えそうなキャラ、人物画像が得られるかどうかを3つの画像生成AIで比

【CSS入門】flexboxの基本と使い方をプロがわかりやすく解説！ Web制作ハウツー UIUX・サイト設計 フロントエンド(HTML/CSS) デザインカンプの見た目通りのWebサイトを作成しても、テキスト量や要素の増加によってレイアウトが崩れることがあります。 「再現度を保ちつつ、レイアウトの崩れない柔軟なサイトを作成することはできないのでしょうか？」 そんなお悩みを今回はCSSプロパティのFlexbox（フレックスボックス）を用いて解決していきます。 Flexboxはレイアウトの設定によく用いられるfloatに比べて、横並び/センター揃え/等間隔配列など、行と列を同時に制御することができる優れもの。 以前まではブラウザによって挙動が違ったりサポートしていなかったりとクロスブラウザによる問題がありましたが、最近ではサポートが進み安定して使用できるようになりました。これから利用頻度が上

【現役コーダー秘伝】簡単CSSアニメーションの種類や作り方 Web制作ハウツー Webデザイン フロントエンド(HTML/CSS) ちょっとアニメーションのついたサイトってかっこいいですよね。 どうやって動いているのか気になるところです。ソースコードを紐解いていくと、意外に小規模なところからアニメーションは実装できます。 しかし長年コーディングに携わっていると、条件や制約があるのではないかと疑ってしまいます。スマホでのアクセス数が増加する中、PCでの閲覧が無いわけでもありません。レスポンシブな組み込みが求められる中で、省コスト化（工数や予算など）を目指しながら実装は進めたいもの…。 今回は、ユーザビリティを向上させ、Webサイトやサービスの利用を手助けするCSSアニメーションを取り入れたWebサイト制作を試みます。 CSSアニメーションとは CSSアニメーションとは、CSSに関するプロパテ

最新のCLS対応はaspect-ratioがベスト！padding-topはもう古い Web制作ハウツー UIUX・サイト設計 フロントエンド(HTML/CSS) 以前に自作スライダー作成を交えてCLS対応をご紹介しました。 【CLS改善】CLSスコアがスライダーで低下！原因と改善方法 この時に説明したpadding-topを使って画像分の高さをあからじめ保持させる対応が、CLS対応の手法としてはもう古いようです。現在のトレンドはaspect-ratio。 aspect-ratioを使ったコードの方が、短くシンプルで分かりやすいです。 今回は簡単なサンプルコードと共に、CLS対応のトレンドであるaspect-ratioについてご紹介します。 aspect-ratioとは aspect-ratioはアスペクト比でボックスのサイズを指定するCSSプロパティです。 アスペクト比とは アスペクト比

複雑なAjaxで悩みがち！処理をうまく解決する3つの方法 システム開発 プログラミング Webサイトでエリアを絞るとき等、通常はリンクでページ遷移しますが、ページを読み込む待ち時間がプチストレス… そんなときにページ全体の読み込みをしないで、非同期通信（Ajax）でページ内のコンテンツを一部だけ更新・生成することができます。 今回はAjaxのご紹介と実装方法を解説します。 非同期通信とは？ 非同期通信とは、ブラウザの操作が行える通信のことです。 Webページは、ブラウザがサーバーからページの情報をもらうことで表示を行っています。このブラウザとサーバーのやり取りを通信と呼んでいます。 基本的には、通信が行われているときは、画面全体の更新が発生して、ブラウザ操作を行うことができません。非同期通信では例外的にブラウザ操作を行える状態で、データベースや外部ファイルからデータを取得して、一部の画面を

3分でわかるVue.jsのエンジニア的5大メリット「jQueryより簡単！」 システム開発 プログラミング Webサイトのフロントエンド開発では、JavaScriptフレームワークを扱わない場合、標準のJavaScriptやjQueryで制作を行います。 ユーザーアクションに連動した画面を更新するリッチな表現を行う処理は、Vue.jsを扱うことで、コード量を減らしたり、メンテナンスや管理が行いやすくなりますので、ご紹介します。 本記事は、HTML, CSSを学び、JavaScriptへの理解が少しある、マークアップエンジニアやデザイナー向けの記事になりますので、ご了承いただければ幸いです。 Vue.js について Vue.jsは、ユーザーインターフェイスを構築するためのJavaScriptフレームワークです。開発で必要な機能がセットになったツールと思ってもらえればわかりやすいと思います。

WordPressでよく使用するアクションフックとフィルターフックの実例3選 Web制作ハウツー システム開発 CMS CMS開発・構築 ブログを作る、コーポレートサイトを作る、様々なWebコンテンツを作る際に利用されているWordPressですが、開発中に 「投稿が更新された時にこの処理をしたい」 「自動で出ているこの表示をカスタマイズしたい」 「デフォルトだとこの挙動だけど、ページの種類や個別毎に挙動を変えたい」 などとデフォルトの挙動をカスタマイズしたい箇所が出てきます。 以下のように実現するだけならばできます。 もちろん投稿が更新された時に処理をしたければcronでMySQLを監視して投稿テーブルが増えたら処理をするPHPを書く 表示をカスタマイズしたければそのページ上で JavaScriptを使用して表示を変える ページごとに挙動を変えたければページのテンプレートにPHPで処理を

PageSpeed Insightsスコアを53点→89点に上げた方法とCore Web Vitals改善 Web制作ハウツー Webマーケティング UIUX・サイト設計 SEO対策 「サイトが表示されるまで遅い！」「途中までサイト表示するのに、操作できない」そんな体験をみなさんも一度や二度あるでしょう。もっとあるか。 ページスピードが遅いと、ユーザー体験が損なわれる。離脱率が上がりやすい。不利益があることはWeb担当者は知っているものの、 「サイトスピードが大事だとわかってはいるけど、どうやって改善できるかわからない」 「スピードの改善がどのくらい効果あるのかわからない」 と二の足を踏んでいることが多いのではないでしょうか。 Googleが提供するPageSpeed Insightsを使えば、スピード改善の診断と改善方法を提示してくれます。 カンタンに対応できる改善方法から、1Web担当

Webサイトのリニューアルに伴って、ドメインを変更するプロジェクトが弊社では度々あります。 ドメインを変更する場合、それまでのSEOの評価や、ユーザーへの配慮を考え、旧ドメインから新ドメインへの移行をうまく設定する必要があります。 新GoogleSearchConsoleになってから、アドレス変更機能が今までありませんでした。2019年10月2日に新GoogleSearchConsoleに新アドレス変更機能をローンチしたことが発表されました。 Launching today in Search Console: a new interface for "Change of Address". Let us know when you're moving a domain or subdomain , and we'll guide you through the process. Chec

クーシーは1999年11月に設立、数多くの大規模企業Webサイトの制作・運用を中心に活動してきました。各案件の窓口であり中枢として統括業務を行う「東京本社」、Webサービス・アプリの制作・開発の実務を担当する「クーシーラボ 岩手」、東京郊外のガレージでプロダクト制作を行うモノヅクリの発信基地「クーシーモータース」の3ヶ所の拠点で事業展開をしています。Web制作のあらゆる工程に精通し、それを全て内製で行えるオールインワンの制作体制、経験に基づく的確なWebコンサルティング、アプリ開発など、Webサービスに関する幅広い業務を行うクリエイティブエージェンシーです。 企業情報を見る クーシーのビジョン Our Vision サービスについて デザイン思考のビジネスモデル 「設計思考」と「考える」こと。 最近「デザイン思考」という言葉がありますが、我々はデザインを「設計思考」と「考える力」と捉えてい