BLOG

【無料で利用できるWebアイコンフォント】Font Awesome を使ってみよう
投稿日:2020年8月28日

ボタンの横にアイコンを配置することが多々ありますよね。 そんなとき、画像を書き出さなくてもアイコンフォントを使えば、簡単に設置できるので紹介します! 【目次】 概要 事前準備 ダウンロードして使う CDNを使う ...

目指せデザイン完コピ!!少しでもデザインに近づけるためのHTMLコーディング
投稿日:2020年8月21日

HTMLコーディングをしていて、見た目では完璧にデザイン通りになっていると思っていても実際比べてみるとすごくズレてる… 皆さんそういう経験あるのではないでしょうか。 まず気を付けないとどれぐらいズレてしまうのか、また努力次第でどれぐらいデザイン通りになるのか比較してみました! まず ...

【初心者向け】WEBサイトで使用する良い写真の選び方
投稿日:2020年7月27日

WEBサイト制作に欠かせない要素である写真… 予めクライアントが撮影された・購入した画像を頂ければ一番良いのですが、 素材サイトより写真の選定をお願いします!となって困った経験をした人、居るんじゃないでしょうか。 私も写真探しに苦労し、時間をかけてしまってたあのころを振り返って、今回は写真 ...

【2020年版】ヘッダー・メガメニュー・スマホメニューのデザイン参考まとめ
投稿日:2020年7月7日

世の中には様々なウェブサイトがありますが、ほとんどのサイトで取り入れられているのがヘッダーですね。 皆さんはどのようなデザインを思い浮かべますか? PC時のデザインであれば、「左端にロゴがあり、右端にナビゲーションとしてリンクがある」といった形を想像される方が多いのではないでしょうか。 作 ...

スマホの傾き検知、Web制作で使える? or 使えない?
投稿日:2020年6月24日

スマートフォンでアプリを使っていると、時々デバイスの傾きで画面内もお洒落に傾く事があるかと思います。 Webでも出来るかなと思い調べたところ「DeviceOrientationEvent」というものが見付かりましたので、簡単なデモを作成してみました。 今回は手軽にwebpackとBabe ...

Premiere Proで動画を軽量化して、Webサイトの表示速度を上げよう
投稿日:2020年6月3日

Web制作を担当するにあたり、背景に動画を流す機会が増えてきました。会社やサービスの印象を動画で視覚的に紹介できるため、導入する企業は増えているかと思います。ですが、動画のサイズが重いとページを開くまでに時間がかかり、サイトの離脱が増えたり、少しもやもやしたりしてしまいますよね。 そん ...

新卒でWebデザイナーになる為に必要なポートフォリオの中身
新卒でWebデザイナーになる為に必要なポートフォリオの中身
投稿日:2020年5月18日

前回はポートフォリオの作り方についてまとめました。 今回は新卒でWebデザイナーを目指す人のポートフォリオにどんな中身が必要か、書いていこうと思います! 【目次】 ポートフォリオの中身 載せておきたい作品 その1.既存のWebサイトのトレース その2.既存のWebサイトのリニ ...

新卒でWebデザイナーになる為のポートフォリオの作り方
新卒でWebデザイナーになる為のポートフォリオの作り方
投稿日:2020年5月18日

就活の季節ですね、コロナの影響もありなかなか動けず悩んでいる学生さんもいるのではないでしょうか… 今回はデザイナーとして就職活動をするには必須となる、ポートフォリオについて紹介していきます。 【目次】 ポートフォリオとは ポートフォリオの種類 紙媒体ポートフォリオ ページ構成 ...

【HTMLから】WordPress化しやすいコーディングのすすめ【手順付】
投稿日:2020年5月18日

無料で使用できて、コンテンツの管理が簡単にできる上に、カスタマイズ次第でなんでもできるWordPress。なんでも全世界のサイトの4分の1はWordPressが使われているとかいないとか。 弊社でもWordPressの案件は多く、リニューアルから新規作成など多岐にわたります。 中でもHT ...

【テレワークにもオススメ】デザイン修正指示ツール徹底比較!【AUN・MONJI】
投稿日:2020年4月9日

コロナウイルスの影響で、在宅勤務やテレワークスタイルになった会社も多いのではないでしょうか? 修正指示をいつも口頭でしていた場合、依頼者・担当者に距離があるとどうしてもやりとりがしづらくなってしまいます。 PDFに手書きをして送る場合は担当者が文字を判別出来なかったり、単語のコピペ出 ...

2020年に再ブーム?!スキューモーフィズムをCSSで取り入れよう
投稿日:2020年1月31日

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

slickの使い方からカスタマイズまで【スライダープラグイン決定版】
投稿日:2020年1月24日

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

リキッドレイアウトは誰でもできる!!コーディングのコツまとめました
投稿日:2020年1月17日

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

【Adobe Fonts】Web制作会社側の個人アカウントでAdobe FontsのWebフォントを使ってよいのか
投稿日:2020年1月9日

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

WEB制作「提案資料」の考え方・作り方~抑えておきたい基本のポイント~
投稿日:2019年12月26日

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

HTMLで背景に斜め線を引く様々な方法(CSS、SVG、canvas)
投稿日:2019年12月25日

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

【チーム作業のデザイナー向け!】PhotoshopでAdobe Creative Cloudライブラリを使いこなそう!
投稿日:2019年12月18日

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

カンタン!CSSでフォームをレスポンシブにしよう
投稿日:2019年11月19日

いまやスマートホンを持っていない人はいないくらい、携帯端末が普及しました。 とは言いつつも、ホームページのフォームはまだパソコンの画面幅にしか対応していないサイトもちらほらと見かけます。 モバイル表示に対応するのはハードルが高いように感じるかもしれませんが、意外にも簡単です。 今回 ...

【最新版*2020年度にむけて】Webデザイン参考サイトまとめ【WEBサイト/レスポンシブ/LP/バナー】
投稿日:2019年11月5日

もうすぐオリンピック開催年の2020年!最新のWebデザイン参考サイトをサイト、レスポンシブ、ランディングページ、バナー別にまとめてみました。 参考サイト自体が最新デザインであったり、使いやすい・見やすいサイトを厳選しました。 これからのデザイントレンドをチェックするのに是非ご活用くださ ...

画面設計/ワイヤーフレームの作り方~Webディレクター必見~
投稿日:2019年10月28日

ワイヤーフレームとは別称「画面設計」と呼ばれるもので、Webサイト制作の工程の中で一番初めに作成されるものです。ビジュアル的には簡素ですが、非常に重要な工程です。 ワイヤーフレームを作成せずそのままデザインを起こしていく場合もありますが、その際もデザイナーの頭の中ではワイヤーの設計レベルの ...