2018.03.06 WEBWebデザイン 可読性の高い文章をデザインするポイント（前編：フォント＆文字サイズ） 資料作成やチラシ、Webサイト等のデザインをしている上でなんとなく読みにくくなってしまうことはないでしょうか。 単なる文章でも、ちょっとしたポイントを押さえるだけで、読みやすさが全く変わってきます。 今回は、文章を読みやすくするポイントについて前後編に分けてご紹介していきます。 文章デザイ [...]
2018.02.13 WEBWebデザイン 複雑な画像を「簡単＆きれい」に切り抜く方法 -PhotoshopCCの「選択とマスク」機能- DTP・WEBデザイナーの方、Photoshopを使って作業を行っている方に質問です。 皆さんは、Photoshopで画像を切り抜く際どのように作業していますか？ さまざまな方法があると思いますが、その中でも従来主流であったパス（ペンツール）を駆使して作業しているケースが結構多いのではないでしょう [...]
2018.01.10 WEBWebデザイン レスポンシブWebデザインについて知っておきたいこと【コーディング編】 前回の「レスポンシブWebデザインについて知っておきたいこと【作り方入門編】」では、レスポンシブの仕組みについて説明しました。今回は、レスポンシブWebデザインをはじめてコーディングする人向けに、基本的なコーディング方法を説明したいと思います。 レスポンシブWebデザインのコーディングは一見難 [...]
2017.12.07 WEBWebデザイン Webサイトで扱う画像ファイル形式（JPG・GIF・PNG）を理解し、上手に使い分けよう これからWebサイト制作を学ぶ方や初心者の方に向けて、Webサイトで使用する画像形式の種類や特徴、さらには使い分けについて説明します。 画像形式の種類・特徴を把握し、それぞれ最適なファイル形式で配置（使い分け）することによって、Webサイトの表示速度を速めることや、画質のクオリティを高めること [...]
2017.11.08 WEBWebデザイン ＜初心者向け＞知っておきたいHTML5の基本【マークアップ編 その2】 前回の「＜初心者向け＞知っておきたいHTML5の基本【マークアップ編 その1】」では、マークアップの基本となる「カテゴリー」「コンテンツ・モデル」の説明をいたしましたが、その他にも特殊なマークアップルールがいくつか定義されています。 今回は、前回説明した7つのカテゴリーのように分類することがで [...]
2017.10.10 WEBWebデザイン 非デザイナーも知っておきたいデザインや資料作成に役立つ「デザイン4原則」 提案書や報告書、レポートといった資料を作成する際に、どのように情報をまとめていいか悩んでしまうことはありませんか？ そのような場合には、今回ご紹介する「デザイン4原則」を意識して作成すると見やすい・分かりやすい資料に仕上がります。 「デザイン」と言うとグラフィックデザインやWebデザインをイメ [...]
2017.10.06 WEBWebデザイン マテリアルデザインって何？フラットデザインとの違いは？ 皆様はじめまして。新人の酒井です。 株式会社アーティスに入社する前は、金融機関での営業職に務めていました。全く畑違いの業界からWeb制作の営業を担当する形になりましたので、これからWebディレクターやWeb担当者になられる方と同じ目線に立った情報を発信していければと思っております。これからどうぞよ [...]
2017.10.03 WEBWebデザイン 画像オブジェクトの「ラスタ形式」と「ベクタ形式」 違いと使い分けについて 画像オブジェクトには「ラスタ形式」と「ベクタ形式」、表現の異なる2種類の形式があります。 この2つの違いを理解しておくと、デザイナーに依頼するときに認識ズレによる作り直しなどを防ぐことができます。また、これからPhotoshopやIllustratorの使い方を勉強する方は、必ず理解しておきた [...]
2017.08.10 WEBWebデザイン ＜初心者向け＞知っておきたいHTML5の基本【マークアップ編 その1】 HTML5でコーディングする際に、「この要素の中にはどのような要素を入れることができるのだろう？」「HTML5のマークアップのルールがわからない」と悩む方が多いと思います。 今回はマークアップの基礎となるHTML5の「コンテンツ・モデル」「カテゴリー」についてご説明いたします。 HTML5 [...]
2017.08.07 WEBWebデザイン Illustratorの簡単な機能を使った地図作成のコツ Illustratorを使い始めたばかりの方や地図の作成に慣れていない新米デザイナーに向けて、Illustratorの簡単な機能を使った地図作成のコツをご紹介いたします。 コツを理解することで作業効率を上げると共に、しっかりとした地図の基礎を作成することでデザインの幅を広げることができます。 [...]
2017.06.13 WEBWebデザイン レスポンシブWebデザインについて知っておきたいこと【作り方入門編】 「Webサイトのスマホ対応が必要な 3つの理由」でも書かれているように、Webサイトのスマホ対応はWebサイト制作において必須要件になっています。 そのスマホ対応の方法として多くのサイトで用いられている「レスポンシブWebデザイン」。 今回は、なんとなくしか理解できていない方のために、レスポン [...]
2017.05.12 WEBWebデザイン Illustrator・Photoshopを使用したイラストの描き方（イラスト加工編） 前回「Illustratorを使用したイラストの描き方」をまとめた記事を書きましたが、パス初心者やパスが苦手・イラストが苦手な人でもWebサイトで使えるようなクオリティの高いイラストが簡単に作れないかという意見がありました。 そこで今回は、簡単なパスイラストの作成からPhotoshopでイラス [...]
2017.05.11 WEBWebデザイン ＜初心者向け＞知っておきたいHTML5の基本【新要素編】 前回の記事 ＜初心者向け＞知っておきたいHTML5の基本【文書構造編】では、HTML5の特徴や主な文章構造の変更点をご紹介しましたが、HTML5から新規で追加された要素があり、どのように使用したらいいのかわからない方もいらっしゃると思います。 そこで今回は、最近正式に勧告されたHTML 5.1 [...]
2017.02.07 WEBWebデザイン 伝わりやすいバナーをデザインするポイント（レイアウト編） シリーズ「伝わりやすいバナーをデザインするポイント」、今回は「レイアウト」をご紹介させて頂きます。 レイアウトにはいくつかのセオリーがあり、ある程度パターンが決まっています。そこでレイアウトによってどのような印象になるのかを知ることで、効果的な配置をしていきましょう。 STEP1：視覚的にアピ [...]
2017.01.06 WEBWebデザイン 伝わりやすいバナーをデザインするポイント（フォントと色の選び方編） シリーズ「伝わりやすいバナーをデザインするポイント」、今回は「フォント」と「色」の効果的な選び方についてご紹介します。 魅力的なバナーを作成したいけれど、画像等の素材がない…という場合でもフォントと色を工夫するだけで伝わるバナーを作ることが出来ます。 ターゲットを決める まずは作成するバナーが [...]
2016.11.07 WEBWebデザイン ＜初心者向け＞知っておきたいHTML5の基本【文書構造編】 レスポンシブWebデザインをはじめとするWebサイトのマルチデバイス対応の増加などに伴い、HTML5でのWebサイト構築が現在主流となっています。 今までHTML4やXHTML1.0で構築してきた人の中には「HTML5って難しそう」「今までのHTMLとはどう違うの？」と思っている方も多いのではな [...]
2016.10.07 WEBWebデザイン Illustratorを使用したイラストの描き方（パスイラスト編） グラフィックソフト（Illustrator・photoshop 等）を使用しているけれど、 イラストを描くのが苦手な方や 今からイラストを描くことを始めたい方向けに、Illustratorを使用したイラストの描き方（手順とアレンジ）をご紹介します。 ※今回はグラフィックソフトでよく使われる、パス [...]
