配色、フォント、レイアウト、アニメーションなど、デザイナーが考えなければはいけないことは膨大です。急がなきゃいけないのになかなか作業が進まない…と苦戦することもあるのではないでしょうか。 そこで今回は、デザインをより効率的に、ハイクオリティにしてくれるWebサイトやサービスをご紹介します。 Coolors Coolorsは、バランスの良い配色パターンをランダムに表示してくれるWebサービスです。スペースキーを押すと、センスのある配色パターンを次々と生成してくれます。 気に入った色は固定することができ、さらにそれに合った色を探してくれるのでとても便利です。また、気になった色にカーソルを合わせれば、HSB、CMYK、RGB、PMSの値やコピックの色番号を知ることもできます。 COLOR SAFE

年末が近づくとまた今年もあの季節。 年賀状のシーズンです！ ハガキ年賀状は年々減少しつづけていて、年賀状発行枚数は2003年の44億枚をピークに、2016年は26億枚でした。 通信手段はメールか電話、友だちや家族ならSNSやチャットで連絡が当たり前になってきている今だからこそ、ハガキをおすすめしたい！！ 年賀状注文は面倒？ 年賀状の注文は写真やさん、印刷屋さん、比較的大きなスーパーなどでも取り扱っているほか、本屋さんで年賀状素材集などを買って自宅でプリントするのが大半でしょうか。 イラストレーターなどのソフトを使う手もありますが。 ちなみに弊社の年賀状は毎年イラレで描いています。 無料で作れる年賀状 最近無料で、かつクオリティの高い年賀状作成サービスが出てきています。「早くて」、「無料で」、「誰でも作れる」サービスをご紹介します。 郵便年賀.jpの「はがきデザインキット」 郵便年賀.jpは

背景フリー素材サイトならここ！鉄板サイト15選更新日: 2019年2月5日公開日: 2015年8月12日 ブログやメディアなどのWebデザインを考える時に「背景をどうする？」と悩む方も多いと思います。 そこで今回はwebデザイナーの方に役立ちそうな背景画像・動画のフリーサイトを15個ピックアップしてみました。状況に合わせた豊富な素材からインスピレーションを感じるアイテムが見つかるといいですね。 鉄板サイト15選 早速鉄板のフリー素材サイトを紹介していきますね。 パターン系背景素材なら「Bg-Patterns」 画像出典Bg-Patterns 素材数／200以上　　ファイル形式／.jpg .png .svg 利用制限／商用OK　　ユーザー登録／不要 気にいった画像があればブラウザ上で自分なりにアレンジし、ダウンロードすることが可能。Webサイトのバックグラウンド、紙資料の背景画像として利用も

This domain may be for sale!

デザイナー兼踊り手のJona（＠jona_yawaraka）です。わたしはLIGブログに掲載されるアイキャッチ（ブログ記事の顔になる画像）、バナー、背景ジャック（大型バナー）など、さまざまな画像を製作してきました。 画像をつくって客観視したとき、「ある程度まとまってはいるんだけどなんだかしっくりこない。でも何が悪いかわからない……」ということありますよね。 わからないときはとにかく手を動かして、いろいろと試してみるとうまくいったりするもの。ということでデザインがしっくりこないときにとりあえず試したい10の簡単な方法を、私の経験を踏まえながら紹介いたします。 独学でつまずいていませんか？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。どんなスクールがあって、どんな内容が学べて、費用はどれくらいするのか、情

2016年3月19日 Webサイト制作, 便利ツール Webサイトを制作する際に大切なものの多くは、制作開始する前の段階にあります。サイトの設計・計画がうまくいっていないサイトは、制作開始後、様々なトラブルに見舞われることでしょう…。ということで今回はモックアップ・プロトタイプと呼ばれる設計画面を作成できるオンラインツールをいくつか紹介します。サイトの大まかな動きをチーム内でシェアしたり、フィードバックしあったりと、便利に使えるものばかりです！ ↑私が10年以上利用している会計ソフト！ 2016年3月16日 追記：Adobeがリリースしたプロトタイピングツールも試してみました！→ Adobe Experience Design（XD）を使ってアプリのプロトタイプを作ってみた ViewFlux ViewFluxはデザイン画像のシェアやフィードバックが簡単に行えるツール。必要なページのデザイン

事例として紹介するのは「重慶飯店（じゅうけいはんてん）」です。こちらの楽天市場店のサイトを実例として、3か月で行った改善内容を紹介していきます。 重慶飯店は、創業56年の横浜中華街の四川料理レストランです。リアル店舗の他、ネットショップも複数展開しており、ネットショップにおける商品取り扱い点数は約200点。麻婆豆腐醤や点心・飲茶、横浜銘菓の番餅・月餅・中華菓子などが主力商品です。購入ユーザーは、老若男女を問わず、手土産品や贈答品はもちろん、家庭用としても利用されています。 重慶飯店では、3年計画で通信販売売上の年商を3倍にすることを目標としていて、達成への一歩として、最初の3か月で次のような対策を行いました。 Point 1 伸ばすべき点：コンバージョン率をさらにUPする現状から「伸ばすべき点」を見つけるために、まずサイト全体のアクセス解析データを調べたところ、主商品におけるページ転換率（

光陰矢の如く、あと１月ちょいもすれば新卒採用の新人webデザイナーも入社してくる時期となりました。 受け入れる側ももちろんですが、当の本人も「現状、webデザイナーとしてどこまで出来んの？」って不安は、どこかしら持ってるんじゃないでしょーか。 というコトで今回のエントリーでは、これから未経験でwebデザイナーの世界に飛び込んでくるという方に、とりあえずこれだけは知っといて！ってゆー基礎的な知識を、個人的見解ではありますが６つほどピックアップしてみたいと思います。 あくまで基礎 + 個人的なお話なので、鬼軍曹みたいな先輩にしてみれば「知ってて当然」くらいかもですが (^^;) 新人webデザイナーに知っていて欲しい基礎知識 1.「Photoshop / Illustrator」の基本的な操作方法 webデザイナーである以上、ココは絶対に外せないトコだと思います。 いくら「未経験からでもしっか

昨年、未経験からWebデザイナーとして入社してはや1年が経とうとしています。ふと自分を客観的に見つめてみると、「思ってた程、成長していない…」ということに気づき、今更ながら焦り始めているところです。情けないですが。 Webのことも入社前に比べ、遥かに知識を得たし、デザインやコーディング、プログラムのことも少しは自力で調べられるくらいにはなりましたが、あまり実務で役立てられていない、成果を発揮できていないと思っています。 そういう訳で、だらだら2年目に突入する前に、1年間で指摘されたこととそれを踏まえた目標を記録しておきます。 まずは、デザインについてです。 コーディング編はこちら。 新人Webデザイナーの私が、1年目で指摘されたことを振り返る[コーディング編] - IT系女子ログ ※自分の為のまとめなので、読みづらいかと思いますがご容赦頂けると幸いです。 目次 指摘されたこと 指摘を受けて

昔はさっぱり注目されていなかったフッターエリアですが、今では多くのクリエイターがフッターに関心を持つようになりました。フッターデザインだけを集めたサイトなんて過去にほとんどありませんでしたが、ここ2、3年でいくつもそういったサイト・ページを見るようになりました。また特に海外サイトで言えることですが、最近では「これがフッターなのか！」と思う、すごいクオリティーのフッターも見る機会が多くなりました。 皆さんは大きく関心を集めるようになったこのフッターエリアを上手に活用できていますか？ ユーザーの起こすアクションを絞る(誘導する) 皆さんはブログの記事を読み終わった後、次にどんなアクションを起こしますか？ スクロールしてトップに戻る 元々いたサイトに戻る(はてブとか) タブを閉じる ツイートしてみる なんとなくコーヒーを飲む 上記のようにユーザーは、記事を読み終わると必ず何らかのアクションを起こ

こんにちは、デザイナーの藤田です。 デザインをやっていると、見出しのデザインに悩むことって結構ありますよね！ 自分のデザインストックを増やすためにも、今回のブログでは今っぽい見出しデザインをタイプ別にまとめてみました！ 独学でつまずいていませんか？ 現場で活かせるWebデザインを効率的に学びたい、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGではWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。 詳細を知りたい方は、ぜひスクールの詳細をチェックしてみてください！ →スクールの魅力が分かる資料はこちら！（資料請求） ※この記事は2022年3月に編集部が情報を更新しました ジャンプ率パターン ミニマムなデザインでは見出しに過度な装飾を加えずに、本文に対し見出しの文字サイズを大きくすることで見出しを目立たせるサイト

「Webディレクション標準スキル152 企画・提案からプロジェクト管理、運用まで」によると、Webディレクターのタイプは大きく4つに分類され、それぞれ必要とされるスキルが異なります。 Webディレクターのタイプ 営業系ディレクター 企画系ディレクター デザイン系ディレクター システム系ディレクター 私はこれまで営業・企画寄りのディレクター業務が多かったのですが、あらためてWebデザインを学び直して、デザイン・コーディングの技術も向上させたいと思っています。今年の目標は、Webサイト・Webページを最低でも3つは作ることです。勉強の過程を記録する要素が強いので日記に近い記事になってしまいますが、これからWebデザイン、コーディングを学ぶ方や、さらに知識を深めたいWebディレクターの方に役立つ記事になれば幸いです。 企画・営業系のディレクターがデザインやコーディングをするメリット 仕事をしてい

こんにちは、デザイナーの佐藤タカアキ（@sato_tkaaki）です。 僕はこれまでにLIGのアイキャッチ・バナーを1,000個以上作ってきました。毎日膨大なアイキャッチ・バナーを制作する中で「どうすれば、たった一枚の絵で人の心をつかむデザインを作れるのか？」ということを考えてきました。 まだ未熟な僕ではありますが、これからデザイナーを目指すかたや駆け出しデザイナーに向けて、僕が見出した人の心をつかむデザインのポイントをご紹介したいと思います。 人の心をつかむために！僕がデザインでこだわる5つのこと 1.　情報をちゃんと伝えてあげるデザイン デザインの基本ではありますが、まず最初に伝えたい情報をきちんと整理して、それが相手に伝わるために設計することが何よりも大切です。 2秒で情報を伝えきれるか なぜなら人は、広告やアイキャッチを見ると「たった2秒間でその情報が自分に関係するかどうかを判断す

ウェブ・レイアウトの概要 ウェブ・レイアウトを大きく分けると「グリッド・レイアウト」とフリー・レイアウト」の 2つに分けることができます。グリッドレイアウトとは、文字や画像、カラムなど一定の規則に従い、格子状にレイアウトして、整然としたイメージの印象が強いレイアウトになります。Wordpress の多くのテンプレートで、グリッド・レイアウトが利用されています。 またグリッドレイアウトは、スマホやPC、タブレットなど多様なデバイスに対応しやすい可変レイアウトとして利用することもできます。一方のフリー・レイアウトは、グリッドにとらわれない配置で横幅を固定する「固定レイアウト」にむいているレイアウトになります。 グリッド・レイアウトを利用したサイト一例GoogleDesign／ Googleのデザイン・ガイドライン専用サイト。フラットデザイン、タイルレイアウトでトレンドにのったデザイン、レイアウ

デザイナーのありさんです。 LIGが運営しているWebクリエイタースクール「デジタルハリウッドSTUDIO by LIG」で、授業の講師を担当することがあります。今回は、デザインを勉強している受講生さんに個人的におすすめしているデザインの勉強に役立つ本を25冊ご紹介します！ 同じジャンルの本を1冊ではなく何冊も読むと、同じことをいろいろな切り口で説明してもらえている気がして理解が深まります。なのでいつも本はいっぱい買っちゃう派です（笑）。そのなかでも初級〜中級者の方向けにおすすめの本をピックアップしています。 独学でつまずいていませんか？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。どんなスクールがあって、どんな内容が学べて、費用はどれくらいするのか、情報として持っておいて損はないはず。下記におすすめ

一言まとめ ちょっとした工夫でposition : fixed;でも、以下のことが可能。 position : fixed;を設定した要素が、画面からはみ出てもスクロールできる 背景 (body) のスクロールを止める ちょっとしたモーダルウィンド(Modal Window)とか、別レイヤーで画面いっぱいに表示する場面って多々あると思います。 別レイヤーで、画面の縦横いっぱいに表示する時に使う手法は2つしかないです。 position : absolute; position : fixed; fixedのほうが多用されているように思いますが、表示するコンテンツのサイズが大きい時にabsoluteを使う人も多いでしょう。おなじみの「LightBox」でもabsolute使っていますよね？ absoluteを使う利点はあまりないと思いますが、十中八九、 「コンテンツが大きくて画面に収まらない