ブログBLOG

【簡単デザイン】非デザイナーが無料デザインツール「Canva」で簡単にアイキャッチを作る方法

ブログのアイキャッチ画像を作ろうとして、まずは構図を考えて、文字や画像を配置して、色を決めて、ジャンプ率を設定して、やっぱりここはこうして、いやこうでもない…なんて苦戦している間に数時間経っていた！　ということはありませんか。デザインに正解はないので、試行錯誤しているうちにあっという間に午後にな ...

プログラミングの苦手意識を克服する簡単2ステップ

突然ですが、あなたはプログラミングは「得意」ですか？ この記事を読もうとしているということは、おそらくそうじゃないでしょう。 なんとなく「プログラミングは苦手」「とっつきにくい」「自分になんて向いていない」と思っていませんか？ 何をかくそう、筆者もその一人でした。最終学歴も文系で数学も苦手 ...

【webデザイナー必見】raindrop.ioでブックマーク・参考デザインをすっきり整頓＆管理！

仕事中よく使うサイトや参考になるブログ記事は家で見返したいが、いちいち自分のスマホにURLを送るのは面倒！ ブラウザのブックマーク機能は物足りない！ 出来れば1つのサービスでブックマークを管理したい！ 参考サイトをまとめたブックマークを共有したい！ …というわがままな欲望を叶えてくれ ...

APNGでイラストやアイコンを動かそう！～AdobeAnimateの使い方～

イラストや写真を動かして、Webサイトで見られるアニメーションといえばGIFアニメーションですよね。 ですが、近頃GIFアニメーションに代わる新しいAPNGという形式が現れました！ 今回はこのAPNGについてと簡単にアニメーションを作成の過程をご紹介したいと思います。 APNGとは ...

HTMLメールの作り方！デザインからコーディングまで押さえておきたいポイント【サンプル付き】

みなさん、HTMLメールを作成したことはありますか？ テキストだけで作ったメールよりも凝ったレイアウトにすることができ、画像を使って華やかに見せることもできるので、よりユーザーの目を引くことができますよね。 華やかなメルマガなどが送られてくると、ついつい見てしまう方も多いのではないでしょ ...

コーディングをより効率的に！楽にHTMLやCSSを生成できるジェネレータ8選（おまけあり）【2020年度版】

「毎回テーブルタグ書くの、面倒くさい…」と思った経験はありませんか？ Webエンジニアにとって、サイトを作るときには必ずコーディングをおこないますが、いろいろなサイトを作っていても共通して出てくるパーツは意外とありますよね。ただ、都度入力していくのは時間もかかって骨も折れる作業です。 ...

2020年に再ブーム?!スキューモーフィズムをCSSで取り入れよう

2020年のWebデザインのトレンドはいろいろありますが、その中で注目したいのが「スキューモーフィズム」。 この記事では「スキューモーフィズムとはなんぞや？」という話から実際にデザインやコーディングに取り入れられる要素をご紹介します。 後半では、CSSだけでできるスキューモーフィズムをご紹介 ...

webサイト制作でお役立ち！ デザイン&コーディングをする時に便利なwebサイト6選

入力するだけでパパっと数値や単語を変換してくれるwebサイトや、直感的に操作出来る色の見本webサイトなど、普段業務で使用しているデザインやコーディング時に便利なサイトを集めました。 デザイン編 3:2、黄金比等を一括計算「アスペクト比計算ツール」 見ているだけでも楽しい2色の配色参考サイ ...

BRISKホームページアナリティクス～Web制作会社の集客～（社長日記 2020年1月）

明けましておめでとうございます。 本年も宜しくお願い致します。 2020年1月は落ち着いたスタートです。 若干刺激が無いぐらいです。 今月で良い点があった事と言えば ホームページの1日のユーザー数が1,000を超えました。 Googleのアルゴリズム変更と、最近記事をアップしている事が ユーザ ...

苦戦することもたくさんありますが、円滑に進められるように挑戦しています（新卒ブログ2020年1月）

新年あけましておめでとうございます。 2019年度BRISK新卒入社のおふたりに、2020年1月の感想を伺ってみましたのでご覧ください。 新卒Yさん 今月の業務 今月の発見 新卒Mさん 今月の業務 今 ...

slick sliderの使い方からカスタマイズまで【スライダープラグイン決定版】

「スライダーを実装したい！」「でも何を使えばいいの？」という方に朗報です。 この記事ではスライダーを作成するプラグイン「slick」の設定方法から使い方、カスタマイズまでをしっかりばっちり説明していきます。 slickを使えばデザイナーやディレクターの要望にばっちり応えられること間違いな ...

リキッドレイアウトでデザインするコツ!!コーディングのやり方まとめ

Webデザインのスタンダードのひとつである「リキッドレイアウト」。 実はレスポンシブデザインとの違いがよくわからないとか、コーディングしてみたらなんだかうまくいかなかった・・・なんてことありませんか？ この記事ではリキッドレイアウトのメリットと、実際にコーディングするうえでのポイントを解 ...

【Adobe Fonts】Web制作会社側の個人アカウントでAdobe FontsのWebフォントを使ってよいのか

Adobe Creative Cloud（以下 Adobe CC）に契約しているユーザーが利用可能なサービスに、Adobe Fonts(旧名 typekit)というものがあります。 追加料金なく、全フォントを商用・個人用問わず利用可能となっております。 Futuraなど有名な欧文フォ ...

デザインを綺麗に見せる余白！～デザインの基礎～

今回は余白についてデザイン初心者さんや学生さん向けにご紹介したいと思います。 皆さんは余白とどう付き合っていますか？ デザインするうえではかかせない存在の余白。なんとなく…といった感覚で使っていると違和感のあるデザインや 情報を正しく受けとってもらえないデザインになってしまいます。 ...

2019年最高でした！（社長日記 2019年12月）

2019年もあと少しで終わろうとしています。 今年は非常に良い年でした。 プライベートの出来事 ラグビーワールドカップ、シンガポール旅行、甲子園で高校野球観戦、自宅の引越、新たな趣味競馬など 個人的に多くの刺激がある年でした。 ラグビーワールドカップ 3試合見に行きましたが、どれも最高でした。 ...

[Webデザイナーさんへ] そのデザインがコーディングしにくい理由と、改善ポイント詳説

Webデザイナーにとって、自分のデザインがコーディングしやすいのかどうかは意外と気になるもの。 コーダー側は受け取ったデザインを粛々とコーディングするだけなので、あまり「こうしてほしい」と声を上げることはありませんが、デザイナーの観点だけでは気付きにくい問題が埋もれてしまっているか ...

APIを使ったり、GIFを作ったり…手こずりながら新しいことに挑戦しています（新卒ブログ2019年12月）

あっというまに2019年が終わりますね。 2019年度BRISK新卒入社のおふたりに、12月の感想を伺ってみましたのでご覧ください。 新卒Yさん 今月の業務 便利サイトの紹介 新卒Mさん 今月の業務 便利サイト紹介 近況・楽しみなこと 新卒Yさん Yさん2019年新卒 ...

【Nuxt.js】SPA（シングルページアプリケーション）で作るお洒落なページ遷移

Web技術の発展に伴い、近年のWeb制作はより複雑で面白いものになってきました。 そこで、今回はSPA（シングルページアプリケーション）で作るページ遷移のデモを制作しましたので、ご紹介しようと思います。 [toc heading_levels="2"] Nuxt.jsについて ...

【AdobeXD】グループの上からでもアウトライン化（パスに変換）できるプラグインを作った話

Webデザインといえば、今まで「Photoshop」「Illustrator」「Sketch」といった感じでしたが、昨今の「AdobeXD」の普及により、弊社でもXDで作成されたデザインを扱う機会が増えてきました。しかし、まだまだ発展途上のXDでは痒いところに手が届かない部分が多いのも事実で ...

【WordPress】Smart Custom Fields の日付ピッカーの使用方法

WordPressでカスタムフィールドを追加するためのプラグイン「Smart Custom Fields」。 その中でも日付ピッカーの使い方についてまとめました！ 基本の使い方と、応用編として登録した日付の期間中・期間外を判定して表示内容を出し分ける方法をご紹介します。 [toc he ...