Tips : PAGE3

ページ診断ツールLighthouseを使ってWebサイトのページ表示速度を最適化する方法
詳細を見る

Webマーケティング

ページ診断ツールLighthouseを使ってWebサイトのページ表示速度を最適化する方法

Web制作の仕事をしていると「ページ表示速度」が離脱率に与える影響が大きいというのはご存知でしょうが、ページスピードの「最適化の方法」についてはあまり知られていない印象です。 スクールや書籍、教材には詳しく言及されず、実務で初めて身につけるという人も多いでしょう。 そこで、今回はWebサイトのページ表示速度を上げる方法を紹介いたします。 前提条件 前提として、今回はLig・・・
Figmaでオブジェクトを合成してキラキラアイコンを作ろう
詳細を見る

Webデザイン

Figmaでオブジェクトを合成してキラキラアイコンを作ろう

以前、「XDでシェイプの合成を使ってキラキラアイコンを作ろう」という記事を書きましたが、AdobeがXDの単体プランの取り止めを行い、XDを全面的に押し出すことは無くなってきているため、Figmaでのキラキラアイコンの作成方法を紹介いたします。 基本的な作り方はXDと同じ 基本、以下の記事のStep1〜Step3はほとんど同じになります。 https://creators.p・・・
Adobe XD 「シェイプの合成」でキラキラアイコンを作ってみよう!シェイプの合成についても解説!
詳細を見る

Webデザイン

Adobe XD 「シェイプの合成」でキラキラアイコンを作ってみよう!シェイプの合成についても解説!

突然ですが、遊び心やあしらいに "キラキラアイコン"を使いたいと思ったことはありませんか? Font AwesomeやMaterial Iconsにもあったりなかったりしますが、この"キラキラアイコン"、XDと発想の転換で自作できちゃうんです。 目標:背景色や大きさ、枠線、縦横比を変更できるアイコンを作る 今回目標とする形は画像のようなキラキラです。 背景色や大き・・・
Google カレンダー と Google Apps Script(スプレッドシート)で稼働計算表を作ろう!
詳細を見る

Web開発

Google カレンダー と Google Apps Script(スプレッドシート)で稼働計算表を作ろう!

フリーランスをしていると時間単価でのお仕事や、工数の管理など、仕事の時間がどれだけあったのかを計算する場面が多く出てきます。 そんな時、どうしてますでしょうか? Google カレンダーを見てひとつひとつを計算していくスプレッドシートに稼働時間をメモして計算 こんなところでしょうか? Google カレンダーは文字列で検索できるものの、合計時間を出せなかったり、スプレッド・・・
WordPressのカスタム投稿タイプでよくある質問(FAQ)を作ろう
詳細を見る

Webコーディング

WordPressのカスタム投稿タイプでよくある質問(FAQ)を作ろう

Webサイト制作の仕事をしていると「よくある質問」を実装することが多々あります。 静的なコーディングでも作ることはできるものの、お客さんが更新することができないため、運用コストが上がってしまうことも…。 そこで、WordPressのカスタム投稿タイプの機能を使用することで、更新可能な「よくある質問」を作ることができます。 今回はカスタム投稿タイプでよくある質問を作る方法を紹介い・・・
JavaScriptのDOM操作、覚え方のコツ
詳細を見る

Webコーディング

JavaScriptのDOM操作、覚え方のコツ

コーディング初学者の方が難しいと感じる "JavaScript"。 HTML/CSSはマークアップだけだったのに、急に変数やら条件分岐、繰り返しなどのロジックが入ってきて混乱することでしょう。 そんなあなたのためにJavaScriptが楽しくなるちょっとしたコツを紹介します。 そもそもDOM操作って何? JavaSciptではDOM操作という概念があります。 ・・・
「ホームページってなんで高いの?」Web制作の価値提供の話
詳細を見る

Webコーディング

「ホームページってなんで高いの?」Web制作の価値提供の話

Web制作の仕事をしていてお客様と接しているとよく、「ホームページってなんでこんなに高いのですか?」と聞かれることがあります。 極論、高いと感じるならWebサイトは作る必要がないと思っています。 SNSでも頑張れば集客はできますし、こだわりがなければ無料でサイトを作るツールもたくさんあります。 そんな便利な世の中でなぜ、Webサイト制作の依頼があるのでしょうか。 そこには・・・
なぜあなたのポートフォリオサイトは完成しないのか。原因はたったひとつ!制作着手前のステップも公開!
詳細を見る

Webコーディング

なぜあなたのポートフォリオサイトは完成しないのか。原因はたったひとつ!制作着手前のステップも公開!

近年、Web制作を仕事にしようとSNSのプロフィール欄に自作のポートフォリオサイトのリンクを添付している方が多くみられます。 その中でも気になったのが、 ナビゲーションのリンク切れページのコンテンツが途中リンク遷移先が他と同じページ といった「完成していない」ポートフォリオサイトが散見されます。 そして数ヶ月後また同じサイトを見るとまだ見せられる段階にない…。 完成・・・
flexboxの救世主「gap」プロパティが左寄せデザインに超便利!
詳細を見る

Webコーディング

flexboxの救世主「gap」プロパティが左寄せデザインに超便利!

突然ですが、以下のようなレイアウトを作るとき、どのような実装をしますか? 3列の横並びボックス間のマージンは10px改行すると左寄せ下部にはマージンは必要なし flexを利用する方法、いくつか思いつきますよね。 でも、gapプロパティを利用すれば簡単に実装できちゃうんです。 すぐに確認したい方は目次から「gapプロパティを使用しましょう」のアンカーリンクをクリック・・・
SafariやChromeで表示が異なるボタンやセレクトタグを初期化して装飾しよう
詳細を見る

Webコーディング

SafariやChromeで表示が異なるボタンやセレクトタグを初期化して装飾しよう

ボタンやチェックボックスをCSSで装飾せずにデフォルトのままで使用していませんか? 実はこれらのタグ、デフォルトで当たっているスタイルが各ブラウザで異なるんです。 iPhoneのSafariだと少し使いづらいなんて声もよく耳にします。 ボタンやチェックボックスに対してCSSを当てて全てのブラウザで見た目を統一させる方法を紹介いたします! 各ブラウザでのデフォルトの表示 ・・・