ブログBLOG

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オブジェクトやインタラクティブなアニメーションを取り入れ、表現を少し工夫してみようと思 ...

作業時間を軽減！コーディングに便利なコード作成・変換ツール5選

コーディングをしていく中で 「どういうレイアウトにすれば表現できるかな...」 「SCSSで構築してるのに参考サイトがCSSでしか紹介していない...」 なんて思うこともあるかと思います。 調べれば表現したいレイアウトの方法やSCSSで紹介しているサイトがあると思います。 ですが、そんなサイトを ...

【2022年へ向けて】Webデザイン参考サイトまとめ【Web/LP/バナー/SNS広告】

今年ももう年末を迎えようとしていますね。 オリンピックが開催されたり、ディズニーシーが20周年だったり、今年もいろいろありましたがあっという間でした。 デザイントレンドは年々移り変わっていて、情報収集は欠かせません。 そこで、2022年に向けて、最新のWebデザイン参考サイトを、Webサイト・レ ...

JavaScript経験者におすすめ！ウェブサイトに3Dグラフィックを描画できるthree.js（WebGL）を使ってみよう

3Dグラフィックでの表現を用いたウェブサイトが増えてきたなあ、と思う方も多いのではないでしょうか。このグラフィックの表現は、もちろんHTMLとCSSだけでは不可能です。WebGL（Webグラフィックライブラリ）という、ブラウザ上で3次元・2次元のオブジェクトやグラフィックをレンダリングするために ...

【作業を時短！】一目でわかるPremiere Proのエフェクト集

Premiere Proで動画を作成していく中で 「こういう動きでシーンチェンジをしたい...」 「テキストも動かしたい...」 と色々動きをつけたくなることは多いですよね。 ですが、そういった動きを付けるのに方法を探すも中々思ったような動きを見つけられず、検索ばかりに時間がかかって結果制作時間 ...

【デザインイメージ別】背景パターンの選び方・作例まとめ +無料のパターン素材も紹介！

今回はデザインに合ったパターン背景の選び方をご紹介します！ 「パターンを使ってみたけどしっくりこない」「今のデザインにどんなパターンを使えばよいか分からない」 そんな方のために、デザインイメージ別にさまざまなパターンをご紹介します！ サイトに統一感や、アクセントを生み出してくれること間違いなしで ...

【WordPress】特定のカスタム投稿の編集権限をユーザーに与える方法

クライアントからの要望でWordPressを複数のユーザーで運用する場合にユーザー毎に権限を分けたり、 元々ある権限グループ以外に専用の権限グループを追加して細かく設定したい場合があると思います。 これらを解決できる「User Role Editor」プラグインと、追加で処理を書くことで実装可能 ...

WooCommerceの導入とカスタマイズ方法まとめ

ここ数年でオンラインショップの普及がすごい進んだような気がします。 こんなご時世なので、通常よりもさらにオンラインショップの利用数が増えています。 そんな状況の中でWooCommerceに出会ったのですが、一番いいなと思ったのはWordPress上で管理できることです。 他サイトに登録して商品を販 ...

動きを変える月（社長日記 2021年11月）

10月公開の案件がいくつかあったので 11月に入り落ち着きだした印象です。 11月までの数字は確保しているので 12月からの数字を作るモードに変わっていくタイミングです。 今月までは私自身も案件に入りタイトなスケジュールをこなしていたので 案件に入らない時間が多くなるとそわそわしてしまう自分が ...

【コピペでOK】CSSのホバーアニメーションまとめ（デモ・サンプルコード付き）

ナビゲーションやボタンは、サイトを閲覧するときに必ず操作する要素ですよね。 ちょっとした要素に素敵なホバーアニメーションがついていると、細部へのこだわりが見えて、サイトの印象もよくなります。 また、ナビやボタンのホバー時のデザインはなく、コーダーにおまかせということもあります。 コ ...

【2022年 Web/UI】最新のデザイントレンド予測！

2021年も終わりが近づいていますね。 そこで本記事では、2022年のデザイントレンドを予測したいと思います！ 予測だけでなく、解説したり、実際にデザインを作成しているので是非2022年のデザイン作成の 参考にしてみてください。 それではどうぞ！ グラスモーフィズム グラスモーフィズムとは ...