ブログBLOG

【最新版】手抜き厳禁！パンくずリスト・フッターのデザイン参考まとめ

たかがパンくずリスト。たかがフッター。 そう思ってはいませんか？ どちらもユーザビリティを考慮して見やすくデザインする必要のある、 シンプルだからこそ、プロのセンスが問われるパーツデザインなのです。 パンくずリストってそもそもどこに設置したらいいの…？ フッターも手抜きしたくないけど、メインコ ...

インフォグラフィックとは？ゼロから作成まで徹底解説！

みなさんは「インフォグラフィック」という単語を聞いて何を思い浮かべますか？ この単語を聞いたことのある方は「あれだな！」と、ピンとくると思います。 聞いたことのない人は単語から推測して、「イラストを使ったものかな？」などと想像するかもしれません。 本記事ではインフォグラフィックについて0から解説 ...

HTML・CSSコーディングを上達させるための方法とコツを解説！【初心者向け】

HTML・CSSはWebサイト制作の基本です。 最近ではノーコードでサイト構築ができるサービスも多いですが、Webサイト制作に携わりたいとか自分のサイトを自由にカスタムしたいという時には、避けては通れない道です。 （HTML・CSSが書けなくても、多少の知識と理解は必要です。） 学生さ ...

【Gianism】SNSログインの導入からカスタマイズまで詳しく解説！

皆さんさまざまなサービスに会員登録をすると思いますが、個人情報を入力するのは正直面倒ですよね。 そんな時に使いたいのが、ソーシャルログインです。 サイトに導入したいけれど、ソーシャルサービスとの連携が大変そうだとか、実装が難しそうだと思う方がいるかもしれません。 そんな方にオススメしたいのがWor ...

gulp+EJS+JSONで大量のHTMLを効率的に生成する

CMSを構築するほどでもないけれど、複数のページをさくっと作りたい。もしくは、PHPが使えない・インクルードができないサーバーでもページを量産したい。そういったとき、手軽にHTMLを生成できる「EJS」がとても便利です。EJSを活用すると、JSONファイルでコンテンツを一括管理して、それを元に静 ...

【保存版】サンクスページのシーン別例文まとめ

ホームページを作成するにあたってお問い合わせページは必須だと思います。 お問い合わせがあるということはサンクスページも必要になってきます。 本記事では、お問い合わせ、資料請求、商品購入、会員登録など、 特によく必要となる内容を中心にシーン別のサンクスページの例文をご紹介します！ どんな文章が合 ...

【WordPress】MW WP Formでお問い合わせフォームを作ろう！

Webサイトには必ずと言っていいほど「お問い合わせフォーム」が設置されています。 WordPressでお問い合わせフォームを作成するプラグインは色々ありますが、弊社では「MW WP Form」を利用することが多いです。 そこで今回は、HTMLで静的に作成したお問い合わせフォームを「MW WP F ...

2021年振り返り～後厄が終わります～（社長日記 2021年12月）

2021年もあと少しで終わりです。 コロナ禍も慣れてきたのか、振り返ると例年より長く感じた年でした。 打合せもリモートが中心となり、業務にあてられる時間が多く取れたという事もあるかもしれません。 また、私自身が後厄が今年で終わり 次の厄年は60歳でしばらくありません。 厄年は、悪い事が起こると ...

初学者が躓きやすいGitの使い方

Gitとはファイルなどへの変更履歴を記録しそのバージョンを管理するツールで、誰がソースコードのどこを変更したのかなどを管理するためのものです。 エンジニアやコーダーの実務においてGitは必須知識だと思います。 しかし使い始めの時は何をしているのか分からず戸惑ってしまう事がありました。 今回はそ ...

【WordPress】ターム情報・カスタム投稿情報を取得する方法

WordPressの関数ってびっくりするほど名前が似ていますよね。 今でもかなり混乱するのですが、初めてWordPressを触った時は混乱しすぎて目が回りそうになりました…(笑) いつの日か慣れることを願いながら、今回は混乱しやすいターム情報やカスタム投稿の情報を取得する方法をまとめました。 ぜひ ...

BudouXを使って、自動で改行を調整しよう

日本語サイトで単語の途中に改行してしまうことはよくありますよね。 こちら弊社のブログですが、グラフィックやエフェクトなど単語の途中で改行されています。 若干読みづらいですよね。 そんなときは以下の方法などを使って改行を調整してきました。 brタグを挿入する ...

新卒エンジニア今年の振り返り！（新卒エンジニアBLOG3期目　2021年12月）

今年最後のエンジニアブログになります。 今回は今年一年の振り返りについて書いていただきました。 新卒にとってどんな一年だったかとても気になりますね！ 今月で新卒のK.Yさんが退職される為、少し寂しくなりますが12月からは新卒2名で新卒エンジニアBLOGをお届けします。 新卒I.Kさん I ...

さらなる成長を目指して新たなチャレンジを！（新卒デザイナーBLOG3期目　2021年12月）

もうすっかり年末が来てしまいました。今年の12月はすごく忙しい！と社内でバタつく様子も少なく、 比較的落ち着きがありつつもしっかり数字を残せたような気がします。 社内では11月から準備していた無料提案フォームの公開をしたり、 この他にも来年に向けて、新たな取り組みを準備しています。 そこで、今回 ...

【three.js（WebGL）】背景に紙吹雪を舞わせてみよう！【デモ付き】

WebGLとは、手軽に3Dコンテンツを制御できるJavaScriptライブラリです。 そのWebGLを簡単に扱えるライブラリ「three.js」を使って、クオリティアップを目指したサイトを作成してみようと思います。 本記事では、WebGLを使った背景に3Dグラフィックスを描画する方法をデモ付き ...

【保存版！】自動返信メールのシーン別例文まとめ

「自動返信メールを使ってみたいけど、目的別に文章を考えるのが大変」 「こんなとき、どんなメール文面にしたら良いだろう...」 と迷われたことはありませんか？ 大した内容ではないはずなのに、いざ考えてみると意外と時間がかかるのが自動返信メールの文面ですよね。 特にサイト制作会社側の立場では、「クラ ...

フロントエンド入門におすすめ！Svelteを紹介【JavaScriptフレームワーク】

日本ではJavaScriptのフレームワークと言えばVueが人気でしたが、ここ最近はReactの波が来ている印象です。そんな中、Svelteという単語を目にしました。 調べてみると、State of JS 2020で満足度・関心のランキングで1位を獲得しており、勢いのあるフレームワークです。 ...

モーダルを簡単に実装しよう！使い方も解説【Micromodal.js・Modaal】

サイト制作でモーダルを実装することがあります。 なかにはデザインもないのに、途中から実装を依頼されることもあります。 モーダルは モーダルを開いているときは背景を暗くし、背景固定にする 閉じるボタン、または背景をクリックしたらモーダルを閉じる ...

WordPress化を考慮したコーディングをしよう！

デザイン通りにコーディングできて、完成！と思っても、その後WordPress化する場合は注意が必要です。 記事のタイトルが長文になっても崩れないか？ 記事のサムネイル画像のサイズが変わった時の見た目はおかしくないか？ パンくずリストが長くなった時にどんな見た目にな ...

CSSの数学関数を使って記述をスマートに！【calc(), min(), max(), clamp()】

CSS関数をご存じですか？ よく使うのがcalc()やtranslate()、rgba()などで、関数名 + ()で記述されるもののことを指します。 今回は、中でもCSSの数学関数に焦点を絞って解説していこうと思います。 calc()は普段から使っている方も多いと思いますが、min() ...

手軽にリッチなサイトに変わる！3Dグラフィックを描画できるthree.js（WebGL）でサイトをアレンジしてみよう

ブラウザ上で3次元・2次元のオブジェクトやグラフィックをレンダリングできるWebGL（Webグラフィックライブラリ）。そのWebGLを簡単に扱えるライブラリ「three.js」というものを用い、ウェブサイトに3Dオブジェクトやインタラクティブなアニメーションを取り入れ、表現を少し工夫してみようと思 ...