ブログBLOG

モーダルを簡単に実装しよう！使い方も解説【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年のデザイン作成の 参考にしてみてください。 それではどうぞ！ グラスモーフィズム グラスモーフィズムとは ...

この時期は何をしたらいい？来年の新卒さんへ先輩からアドバイス！（新卒デザイナーBLOG3期目　2021年11月）

11月も終わりが近づき、肌寒くなってきましたね。冬も、年末もう目前となってきました… この時期は年内にお願いします！という駆け込みの案件があったり毎年年末にかけて忙しくなってきます。 他にも、BRISKの採用ページの改修や新たなお問い合わせフォームの設置を検討したりと、来年に向けて動き始めています ...

先輩エンジニアから来年の新卒に向けてアドバイス!!（新卒エンジニアBLOG3期目　2021年11月）

今年も残り1か月になってしましました。 そろそろ今年も終わりなので来年の新卒さんにとって、今自分が何に取り組んだ方が良いのか気になるのではないでしょうか。 そこで今月は先輩エンジニアから来年の新卒さんへのアドバイスを聞いてみました！ それでは、11月の新卒エンジニアブログです！ 新卒I. ...

Sass（SCSS記法）の書き方紹介

2020年の冬からSassが社内標準として採用されました。 最初は戸惑いましたが、慣れるとCSSを書くのがつらくなるぐらい便利です。 Sassのごく一部の機能しか使っていないな、と思ったので書き方をまとめてみました。 Sassについて Sass（Syntactically Awesome ...

デザイナーが最低限知っておくべきWebライティングの基礎

Webライティングとは？ ブログの記事はもちろん、コーポレートサイト・ECサイトなどの文章を、 Webサイトを閲覧しているユーザーに理解しやすく、読みやすく書くことです。 プロのWebライターさんには及ばないものの、 簡単な文章ならリライトしてデザインを整えるのもWebデザイナーの仕事ではない ...

【Gridは便利？】CSS Grid Layout(Grid)を使った実践的なコーディングサンプル3選！

みなさんは実案件でGridを導入していますか？ GridはIE以外の主要ブラウザでサポートされています。 そのため、IE対応をしなければならない案件ではなかなか導入ができないのが実情です。。。 しかし、マイクロソフトから正式に、「Internet Explorer 11 デスクトップアプリ ...

【jQuery】動きのあるアコーディオンメニュー・開閉ボタンまとめ（コピペ用サンプル付き）

アコーディオンメニューとは、最初はメニューの一部だけが表示されていて、 クリックすると隠れていた部分が開閉するタイプのメニューです。 小さいスペースにコンパクトにメニューを設置できるため、スマートフォンでは特に頻繁に使われています。 コーディングをしていると、Webサイトのどこかに必ずと言って ...