ブログBLOG

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 ...

WEB制作「提案資料」の考え方・作り方～抑えておきたい基本のポイント～

「WEB制作」という言葉を聞いたときに皆さんが思い浮かべる仕事はどのようなものでしょうか。 デザインを考えたり、コーディングしたり、システムを構築するなど、現場では様々な作業工程が存在します。 当たり前のことですが、そういった業務を行うためには、まずはクライアントから案件として制作の ...

HTMLで背景に斜め線を引く様々な方法（CSS、SVG、canvas）

近年、背景に斜め線を使用しているサイトがしばしば見受けられますよね？ 弊社の制作実績でも斜め線を使用したサイトをいくつか掲載しています。 株式会社オーカム：https://www.ocam.co.jp/ こういったコーディングを過去に経験している人なら分かると思いますが、ちょっとてこず ...

【チーム作業のデザイナー向け！】PhotoshopでAdobe Creative Cloudライブラリを使いこなそう！

皆さんはAdobe Creative Cloudライブラリ、通称『CCライブラリ』は活用していますか？ AdobeCCを利用されている方、特にコンプリートプランなどであれば様々なソフトを自由に使う事が出来ます。 WEBデザイナーさんであれば、Adobe製品はPhotoshopやXD、Il ...

【WordPress】クライアント目線で使いやすく！管理画面カスタマイズのポイント8つと対応方法まとめ

WordPressのカスタマイズをしていくと、機能が多くなればなるほど管理画面がごちゃごちゃしてきます。 制作する側は慣れたものですが、実際に更新・投稿をするクライアントの視点で見ると、実は不親切設計になっているかも知れません。 そこで、今回はクライアントが使いやすい・ミスしにくい管理画面に ...

急にオウンドメディアの担当者になっちゃった！ 初心者のための簡単SEO対策

HTMLもSEOも全然わからないけどメディアサイトを運営することになった方向けに、誰でもすぐ実践できる10このポイントをご紹介したいと思います。 Web制作に携わる者にとっては常識でも、普通の人は「SEO」という言葉さえ聞いたことがないかも知れませんね。 とりあえず記事をたくさん書けばよいの ...

案件を任されました！ドキドキしながら仕切っています。（新卒ブログ2019年11月）

急に寒くなってきて、冬が近いことを感じるようになりましたね！ 2019年度BRISK新卒入社のおふたりに、11月の感想を伺ってみましたのでご覧ください。 新卒Yさん 今月の業務 便利サイトの紹介 新卒Mさん 今月の業務 今月の出来事・反省 楽しかったこと 新卒Yさん Y ...