BLOG

【中小企業向け】最適なCMSを選んで自社サイトに集客しよう!~選定の観点と重要性~
投稿日:2020年10月29日

みなさんはCMS(コンテンツ管理システム)といえば何を思い浮かべるでしょうか? やっぱりWordPress?それともMovable Type?ほかにもまだまだありますよね。機能もお値段も千差万別です。 この記事では主に中小企業様向けに少しでもCMSの理解を深めて頂く為に記事を書き ...

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

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

【迷ったらコレ!】Webデザインでよく使う定番おすすめフォント 13選(日本語9フォント欧文4フォント)
投稿日:2020年8月13日

Google Fontsのサービスなど、最近では無料で使えるフォントも増えてきました。 しかし、数もかなり多くどんなフォントを使えばいいのか迷ってしまいますよね。 今回はWebデザインの現場からよく使う定番のフォントをご紹介いたします。 [toc heading_levels="2 ...

【デザイナー向け】参考&情報収集に!チェックしたいおすすめサイト7選
投稿日:2020年7月30日

デザインのトレンドや技術は日々移り変わり進化していくものです。 特に、ウェブデザイン業界はトレンドの変化、技術やデバイス、ツール面の進化のスピードも速く日々情報収集をしていないとなかなかついていけません…。 そんな悩めるデザイナーさんへ今回はデザイナーにおススメのメディアサイトや技術情報 ...

【ツール別比較】2020年時点におけるPhotoshop切り抜き方法まとめ
【ツール別比較】2020年時点におけるPhotoshop切り抜き方法まとめ
投稿日:2020年7月8日

デザイン業務において避けて通れない作業のひとつに画像の「切り抜き」があります。 WEBサイトやバナーの中に、素材写真から綺麗に切り抜いた製品や人物の画像が効果的に入っているとそれだけでデザインがぐっと引き立ちます。 皆さんは普段どんな方法で画像の切り抜きを行っているでしょうか。 基 ...

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

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

Adobe XDで作れるデザイン・作れないデザイン(PhotoShopとの比較)
投稿日:2020年6月26日

PhotoShopはデザイナーなら誰もが一度は使ったことがあるデザインツールだと思います。 webのデザイン作成をPhotoShopで行うwebデザイナーも多いですよね。 そこで皆さん、Adobe XDというデザインツールをご存じでしょうか? 今回はXDをPhotoShopと比 ...

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

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

HTMLコーディングの検証ってどこ見るの?チェックポイントとよくある不具合をまとめました
投稿日:2020年6月19日

コーディングの検証は見る場所やブラウザ・端末も多く、チェックが大変ですが重要な作業です。 特にヘッダーなどの共通要素、TOPページのチェックは重要です。 確認すべきポイントは多岐にわたりますが、明文化されていないことが多い作業でもありますよね。 担当者によってチェックするポイントが違っ ...

初心者デザイナー向け!+αでもっとデザインをクオリティアップしてみよう!~ウェブデザイン編~
投稿日:2020年5月28日

前回の記事に続き、ウェブデザイン編です! 前回のバナー・アイキャッチ編はこちら 普段何気なく見ているヘッダーやフッター、ボタンなどもデザイナーさんによってしっかりと作られているもの…。 特にコーディングを別の方が担当する場合、おや…?と思われてしまうデザインだと確認の手間などが ...

【デザイン段階でも動く?!】Adobe XDのプロトタイプで、デザインに動きをつけてみよう!
投稿日:2020年5月15日

ウェブデザインを製作する際、「ページを更新した時、順番に下から出てくるアニメーションを付けて欲しい…。」など、言葉で挙動の説明は難しく、伝えるためにアニメーションをデザイナー側で用意するのも大変…。 デザイン・コーディングどちらも自分が担当できる場合であれば融通が利きますが、チームでの作業 ...

【Bodymovin】コーディング苦手なデザイナーさんも、リッチなアニメーションをWebサイトで動かしてみよう!【After Effects】
投稿日:2020年5月8日

コーディングの動きの指示をする際、「このサイトのこの部分に似せて欲しい」などの具体的な指示があれば分かりやすいですが、動きを伝えるというのは難しいと思います。 また、デザイナー自身で動きが付けられるとやりとりの手間が少なくなるかと思います。 しかしJavaScriptなど、コーディングで ...

今すぐコーディング爆速化!プロ仕様なChrome検証ツールの使い方
投稿日:2020年2月28日

軽くて拡張機能も豊富で、日本国内でも世界でもトップシェアを誇るブラウザ・それがGoogle Chrome。 Chromeの検証ツール(ディベロッパーツール)のお世話になっているサイト制作者は多いはずです。 この記事ではサイト制作のプロであるサイト制作会社の人でも意外と知らなかった知られざ ...

【webデザイナー必見】raindrop.ioでブックマーク・参考デザインをすっきり整頓&管理!
投稿日:2020年2月6日

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

APNGでイラストやアイコンを動かそう!~AdobeAnimateの使い方~
投稿日:2020年2月6日

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

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

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

デザインを綺麗に見せる余白!~デザインの基礎~
投稿日:2019年12月27日

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

【Nuxt.js】SPA(シングルページアプリケーション)で作るお洒落なページ遷移
投稿日:2019年12月26日

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

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

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

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

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