こんにちは。デザイナーの藤田です。 「石の上にも3年」と言いますが、私のWebデザイナーとしてのキャリアもついに2年目が終わり、3年目を迎えようとしております。 日々学ぶ事が多く、とても3年程度で大成するような業種ではないですね（どの業種にも言えることだとは思いますが）。 そんな私がデザイナー1年生だった頃を振り返ると「手っ取り早くデザインが上達しないかなー」なんてよく考えておりました。 そこで今回は、私の経験から最も手っ取り早くデザインが上達する「トレース（模写）」の方法をご紹介いたします。 なぜトレースがデザインの上達につながるのか？ なぜトレースがデザインの上達につながるのか、自分なりに考えてみました。 「デザインは細部に宿る」と言われますが、その細部に気付く 「デザインの引き出しが増える」 「自分の悪い所が解る」←これが一番重要！ などなど、良いことがたくさんあります。 まずはカッ

どうしても、こうしても、さわすけです。 今日は、ロゴを簡単に作成できる、超便利なサイトを5つご紹介します（作成したロゴデータをダウンロードするにはお金がかかります）。ランダムでデザインしてくれたロゴを使用するのもありですし、ご自身で作るロゴデザインのヒントにもなるかもしれません！　どれも操作はいたって簡単です。ロゴにしたい文字を専用のフォームに入力するだけです。フォントを選べたり色を変更できたりもします。まずはLOGOTYPE MAKERというサービスを例にロゴの作成方法をご紹介します。 LOGOTYPE MAKERを使ってロゴを作ってみた LogoType Maker http://logotypemaker.com まずは、「Logo Type Maker」を例にロゴの作成方法をご紹介します（他のサービスも対して操作方法は変わりません）。ロゴタイプとロゴマークデザイン一体型のロゴデザイ

ライター内藤です。 本日は日本人の大好きな「均等割り付け」を超軽量jQueryで実現します。 特にtableのthタグなどで利用頻度が高いかと思いますが、block要素でも使えます。 Wordで言うと、これ　　です。 両端揃えではなく均等割り付けが必要な理由 下の図が分かりやすいと思います。 text-align: justify; text-justify: inter-ideograph; 上記のcssは、1行に満たない文字に関しては左寄せになります。 この命令の趣旨は、書籍の紙面を想像してもらうとわかりますが、複数に渡る行の右端を揃えることにあります。 ですので、thタグに上記のcssを適用しても、図中2行目以降のようになってしまいます。 つまり、横幅よりも少ない文字列を均等割り付けできないわけです。 cssでは実現できないので、jQueryを使う 拙筆webkit系ブラウザ（Chr

皆様こんにちは。メディア事業部のまゆです。 過去にディレクターの勢古口がミニマルデザインに関する記事を公開しました。それに便乗して今回私は映画を題材としたミニマルデザインをご紹介しようと思います。 ミニマルデザイン（Minimal Design） あまり使用しない機能のせいでシステムが肥大化することを避け、必要最小限の機能に絞って設計することをいう。 必ずしも外観のデザインに限った用語ではないが、外観について言うことが多い。装飾や凝った形状は排除され、平面や直角が多用される。塗装も省略ないし簡易になるため、色調は単色が多いが、木製品では木目をあらわにすることも多い。 （出典：wikipedia） 映画を記号で表現したミニマルデザイン ポーランドのグラフィックデザイナー Michal Krasnopolski 氏の作品です。定められたグリット内に存在する円弧、対角などの線と配色でデザインをし

お久しぶりです。野田です。 娘が生まれてきてから、ぱったりとレコード遊びやスケボーをやらなくなってしまいました。 こうやってお父さんになっていくのですね。 怖い怖い。 今回は、フォントの基礎となろうことをまとめてみました。フォント選び初心者の方や、初心に戻りたい方などに見ていただけると幸いです。 さて、デザイナーであれば、フォントの基礎を知っておくのは大事なことですね。フォントの基礎を知らないということは、デザインの幅が狭くなってしまうということも、一つの要因と言えることだと思うので、覚えて損はないと思います。 書体のあれこれ 日本でデザイナーをしている方は、「和文フォント」と「欧文フォント」を使用している方が多いと思います。さらに、そのなかでも大きく4つ書体に分かれています。 書体毎にそれぞれのフォントに特徴があり、下記のような傾向があります。 デザインによると思いますが、求められている

こんにちは、デザイナーの王です。絵を描くのが趣味です。 最近は絵を書く時間が全く持てなくて困っています……。 どうにか早く描けないものかと悩んだ末、表題の通り、「写真から絵を作ってしまおう」という結論に至ったわけです。 折角だし、絵が描けなくて困っている方たちにも役に立つテクニックなのではないかということで、やり方をさくっと説明してみたいと思います。 【こちらもおすすめ】 ☞ Photoshopで初めて写真加工をするときに知っておくべき基本手順まとめ 素材写真を用意する 鉛筆画らしく見せるためには、まず写真を切り抜いておきましょう。 アウトラインを抽出 次に、以下のステップを踏んで、アウトラインの抽出を行います。 cmd + Jでレイヤーを複製します。 cmd + Iで反転させます。 Shift + Alt + D　で　描画モードを「覆い焼き」にします。 「色相 ・ 彩度」の調整レイヤーを

こんにちは、マウスはトラックボール派のもりたです。 ロジクールのレシーバーとBluetoothの相性が悪いらしく、競合してキーボードが認識されませんって画面に出るんですけど、普通に使えてます。 まいっか。 今回は以前書いた生粋のWinユーザーがMacにすんなり馴染める！便利な無料アプリや、設定まとめの補足で、元WinユーザーのためのMacトピックです。 索引 Windowsでいう「マイコンピューター」を設定する マジックマウスの接続が切れた時の対処法 CDの取り出し方 Dockに入ってないアプリケーションを整理する ファイルの中身を簡単に確認できるクイックルックを活用する 文字が小さくて見づらい…画面のズーム機能を使う ウェブデザイナーの為のおまけ Windowsでいう「マイコンピューター」を設定する WindowsからMacに移行した人が高確率で躓くポイントです。 逆にMacしか使ったこ

こんにちは。デザイナーの白浜です。 今回はPhotoshopでギザギザしたアイテムを作る方法をご紹介します。 ジグザグラインの作り方 まずはジグザグミシンで縫ったようなジグザグラインの作り方です。 ラインツールや長方形ツールで細長い線をひきます。 次に「フィルタ」→「変形」→「波形」ツールを使います。 ※この時パスはラスタタイズ化されてしまうので注意。 波型のオプションを上記のように設定します。ポイントは波数を1にすることと、三角波にチェックを入れること。これで均等で角がとがったジグザグになります。 上の設定でできたジグザグはこんな感じです。 このツールの困った点は、ご覧のとおりプレビュー画面に拡大機能がないのでプレビューが意味をなしていないことです。（CS6使用。CCだとどうにかなってたりするかな？） 白色だとよりわかりづらいですね。 一部を新規レイヤーにコピーして、線だけにしてからフィ

こんにちは。ディレクターのエリカです。 ここを読んでいる皆さんは、ニュースを仕入れるのはテレビよりネット、という方が多いのではないでしょうか？ 良くも悪くもネットは情報が多すぎて、どれを読めば良いか判断するだけで疲れてしまうこともしばしばです。 もし同じように感じているなら、選ばれた情報だけを取得できる「キュレーションサービス」を利用してはいかがでしょう？ キュレーションサービスとは？ 元々、美術館などの企画展示内容を考える人のことを「キュレーター」と呼んでいました。日本でいうところの学芸員とだいたい同じ意味です。 このキュレーターが持つ「情報を集めて、再構築し、紹介する」という役割を、システムに任せようというがキュレーションサービスです。 ちなみに、キュレーションサービスにも2種類あって、ひとつは「人間がキュレーターになる」ものです。NAVERまとめやTogetterが該当します。 もう

みなさまこんにちは。週に最低2冊は文庫を読む、ライターのうららです。暇があったらとにかく本を読みたいです…。 そう、本が読みたいのです。でも、どんな本を読めばいいか、どれが面白いのか、表紙だけではわかりませんよね。そうやって本屋でうんうん唸りながら本を選んでいたら、時間がどんどんなくなってしまいます。 ということで今回は、数ある書評サイトの中から7サイトだけをご紹介したいと思います。選ばれし評論家編5つとSNS形式で読者がメイン編2つでまとめていきます。 こんな人にオススメ！ 時間のない現代人（本を選ぶ時間を減らし、読む時間を増やす） おおまかな内容・評価を知ってから買いたい 本の初心者だけど、何から買えばいいのかわからない ということで、始めていきましょー！ 選ばれし評論家編 決められた人のみが書評をするサイトです。的確に書評をしてくれるので、安心して読むことができるのではないでしょうか

普段は主にWebフロントエンドを担当しているライターの内藤です。 下記の記事にインスピレーションを頂きましたので、美しいだけではない”優れている”と思われるWebデザインについて、要点を簡単にまとめてみようと思います。 僕は普段実装をやっていて、カンプが届いて「これをコーディングしてください！」っていうお仕事がほとんどなのですが、カンプによってはコーディングしやすいものからデザイナーさんに殺意を覚えるものまで色々あります。 デザイナーからコーダーへ直接デザインが回ることもあれば、間にディレクターが入ることもあると思います。 美しい・きれいなデザインであればあるほど、フロントエンド組も、よし、やってやろうじゃないか！と気合いが入るのは事実です。 けれども、美しいだけでなく”優れた”デザインであれば、以下の様なメリットがあります。 コーディングが楽になるのでフロントエンド組に優しい 下流工程の

中型ライダー（二輪）免許を持っているライターの内藤です。 本日は、ライダーキック並みの強烈さで役に立つ見本サイトをまとめてみたいと思います。 Web屋さんはご存じの方も多いかもしれませんが、ブログをしている一般の方、Webデザイン・DTPに興味のある方、お店を持っている方なども必見です！ 部品に特化した見本 部品に特化した見本サイトをご紹介します。 見出しデザイン（h1,h2,h3……その他DTPでも） はじめは見出しデザインに特化した見本サイトまとめ。 見出しデザイン.com http://midashi-design.com/ 見出しタグ（h1,h2,h3……）のデザインの見本ですが、DTPなどでもヒントになるものがたくさんあります。 カテゴライズは、グラデーション・テキストのみ・テキスト非画像・上線・下線・丸・四角・囲み線・斜線・点線・角丸。 ヘッダー部分に凝っても見出しが適当だと全

こんにちは。子煩悩ライターのイワタテです。 娘、と書くより、愛娘、と書いた方がしっくり来るんです。 きっと、愛しているからでしょうね。 ところで、ライターという職種に限らず、仕事で文章を書くすべてのみなさん。 原稿、自信をもって出していますか？ 僕は、自信をもって出しています。 その秘密は、原稿提出直前に必ず使う、15項目のセルフチェックシートです。 このチェックシートを活用するようになってからというもの、クライアントの機嫌は良くなるし、読者からのレスポンスが見違えたし、みるみる仕事が増えていくし……父ちゃんやったぜ愛娘！ 原稿送信のボタンを押すときはいつも不安になるという方。 よろしければこのチェックシート、印刷して机のどこかに貼って、使ってみてください。 □ 原稿の結論がタイトルに明記されているか。 何が書いてある原稿か直感的に理解できなければ、そもそも読者はページを開かない。 □ 想

こんにちは、Web制作会社「株式会社LIG」の代表取締役会長、ゴウです。 今回、LIGで働くWebデザイナーとディレクターにアンケートを取り、制作する際に普段参考にしているかっこいいサイトや、おしゃれなギャラリーサイトを集めてみました。 毎日仕事で使っている彼らのチョイスなので、かなり実践的で参考になる、かっこいい・おしゃれなサイトが集まったと思います。 全部で27個も集まったので、ジャンル別に分類もしました。それではいってみましょう！ デザインの引き出しを増やすには？ デザインの引き出しを増やすには、インプットのほかに、自分のアウトプットに対して誰かからフィードバックをもらうという方法もあります。周りに相談できる人がいなければ「スクールでの勉強」もおすすめです。 💡現役のプロからデザインを学べる「デジタルハリウッドSTUDIO ｂｙ LIG」の詳細はこちらから ※このページは、2021

最近Photoshopをゲットしたライターのしゅーへいです。 LIGデザイナー陣のデザイン技術をチラチラ見ながら、Photoshopの勉強をしております。ちなみに打倒、王さんです。 今回の記事は、手描きのイラストをデジタルデータ化する方法です。 必要な物は「スキャナ」と「Photoshop」です。今から紹介する方法は、線画でも利用可能なので覚えておいて損はないです。 ストーリー 家にあった中二病ノートに2012年4月に書いたイラストというか文字がありました。なんか「イイナ・・・。」とか思ったので、このイラストをデジタル化しようと思います。 スキャンする まずはスキャナを使ってスキャンします。 320dpiのTIF形式でスキャンしました。綺麗にスキャンできるならJPEGでも良いと思います。 Photoshopでの作業 次に、Photoshopでの作業に移ります。 余計な部分の除去 そのままス

こんにちは。学生ライターの池澤章太です。 Webで記事を書くときや資料を作るときに、フリー写真素材をよく使うと思います。しかし、イメージに合う写真や素材を見つけるってなかなか大変です。場合によっては商用利用できるか調べるなければいけませんし。 そんなときに、商用利用ができて、無料で使える素材サイトがまとめてあると便利ですよね。 ちなみに動画素材については送別会、結婚式に！映像制作に使える無料動画素材サイトまとめをご覧ください。 今回は、23個ほど素材サイトをまとめました。この記事をブックマークしておけば素材に困ったときに役立つはず！ 【こちらもおすすめ】 無料で商用利用OKのサイト特集 商用利用できるフリー写真素材サイトまとめ23選 ここでひとつ注意を。「フリー」という単語は、なにかと誤解を招きやすいですが、著作権がフリーだったり、クレジット表記が不要だったりする意味ではありません。各素材

こんにちは、デザイナー兼フォトグラファーのおまめ （@omame_creator） です。 今回はPhotoshopで写真を切り抜く方法、髪の毛のような細かいものをきれいに切り抜く方法、背景と馴染ませる方法を解説します。 どれも私が試して一番短い時間で簡単にできた方法なので、ぜひ試してみてください！ 独学でつまずいていませんか？ Photoshopの使い方を効率的に学びたい、プロのデザイナーに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」という方は、ぜひこちらより資料をご請求ください。 ※この記事は2022年3月に編集部が情報を更新しました 「選択とマスク」を使って髪の毛を切り抜く方法 髪の毛を目立たせるため、強めになびかせた