こんにちは。 @OfficeTAKUです。 保育園や学校、町内会など、お知らせを作るかたも多いことと思います。 私もよく頼まれて「◯◯だより」みたいなものを作ったりします。 今の時代、インターネットで簡単に無料でイラストが手に入りますが、それぞれに著作権があります。 注意して利用しないと提供者・製作者の権利を侵害することになります。 先日身近でイラストの無断使用により使用料を請求される、ということがありました。

ホーム WebService これはおすすめ！ Canva：ブログやSNSのヘッダ画像など、かんたんに、かっこよくデザインできるWebサービス こんにちは。 @OfficeTAKUです。 FacebookやTwitterのヘッダー画像やブログのアイキャッチ画像。 ちょっとおしゃれにしたい、と思っても、なかなかセンスよく仕上げることが難しいです。 デザインセンスがよくない私のような人間にとっては苦痛とも言えることです。 最近、Kindle日替わりセールをTweetだけでなくブログの記事として毎日投稿するようになりました。 そうした時に困るのが、アイキャッチ画像の作成です。 Adobe Creative Cloud も契約していますので、Photoshop で作成・加工もできますが、センスよく文字を乗せたりするのは至難の技です。 そこで、思い出したのが Canva というWebサービス。 今回

今回はひたすら配色パターンを紹介していく。探しやすいように色ごとに分け、使いやすいように解説とWebコードも合わせて紹介する。プレゼン資料、Webデザインなどで目的に合った配色をそのままコピペして使って頂ければと思う。 ▼ 目次 カラフルな配色パターン 橙系の配色パターン 青系の配色パターン 緑系の配色パターン 黄色系の配色パターン 赤系の配色パターン 高級感を表現する配色 わび・さびを表現する和風配色 シンプルに格好良いグレーの配色 カラフルな配色パターン 1. 淡い「カラフル」 ■ #FF7D7D ■ #FFD580 ■ #B3E2B4 ■ #ABE7FF ■ #B8B2EA ■ #DBDBDB 淡いカラフルな配色は、白の背景に合わせると「透明感」を出すのに効果的。カラフル系の配色は扱いづらいので、上のコードをそのままコピペして使って頂くのが良いかと思う。 2. 力強い「カラフル」 ■

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

約40本の極太油性マジックを消費して生まれた完全肉筆フォントが「たぬき油性マジック」です。半角英数・半角カナ・ひらがな・カタカナ・約物・記号・全角英数・ギリシャ文字・ロシア文字・第一水準漢字・第二水準漢字・IBM拡張文字と豊富な文字数を収録しているにも関わらず、商用利用を含めて誰でも無料で利用でき、手書きっぽさを出したい時に重宝しそうなフリーフォントになっています。 フリーフォント『たぬき油性マジック』を公開しました。 | たぬきフォント http://tanukifont.com/tanuki-permanent-marker/ まずはページの末尾にある「フォントをダウンロード」をクリック。 ダウンロードしたZIPファイルを解凍します。 「TanukiMagic.ttf」というフォントファイルを開いてインストールすればOK。 収録されている文字のサンプルはこんな感じで、「『たぬき油性マジ

資料作りに使えるアイコンや、ブログデザインに使えるシルエット・ドット絵など、小型で取り回しの良い画像素材をまとめたオススメのサイトがあります。 無料でかつ商用FREE。可変も基本的にOKと、非常に自由度の高い使用条件なのが特徴。再配布や素材そのものの販売をしない限りは、自由に使ってくださいという太っ腹なサイトたちなのです。 ぜひ、あなたのクリエイティブライフの中に取り入れてみてください！ 商用FREE これからご紹介するサイトで配布されているデザインは、基本的にはすべて商用利用OKで、かつ無料です。 しかし、ダウンロードしたデザインを再配布したり、販売したりする行為は禁止になっています。 複雑な利用規約はないですが、最低限のルールとマナーは守りましょう。人の優しさに漬け込む行為はダメですよ！ それでは参りましょう。 ヒューマンピクトグラム リンク：human pictogram 2.0 (

更新日: 2017年9月26日公開日: 2015年6月10日プロ御用達！WEBデザインに役立つデザインツール13選 忙しい web デザイナーの方、web デザイン勉強中の方、CSS やプログラミングからチョット目を離してデザインツールを見直してみませんか？ 今までやっていた作業、可視化に時間のかかっていた作業を劇的に変えてくれるツールがたくさん存在します。チョット作業の手を止めて、以下のツールを覗いてみてください。きっとこれからのあなたの web デザインを快適にしてくれますよ！ WEBデザインに役立つデザインツール 13選プロ顔負けのデザインツール「webflow」 webflow 対応 / Mac、Windows 価格 / 無料 ～ $84 /月 表示言語 / English Free トライアル / 有 デザインには自信があるけれど、実はプログラミングはチョット苦手、という方にお勧

【厳選】Webデザインのスキルをアップさせるために読んでおくべき参考書7冊 世の中にはWebデザインに関する参考書が数多く刊行されており、Webデザインを学ぶ環境は十分すぎるほど整っています。Webデザインのスキルを向上させるために読んでもらいたい、オススメの参考書を7冊厳選してご紹介ます。 タイポグラフィの基本ルール－プロに学ぶ、一生枯れない永久不滅テクニック タイポグラフィを学ぶならこの一冊。 文字組みを美しく見せるための基礎知識からテクニックまで、分かりやすく教えてくれます。 本書を読んでタイポグラフィを理解すると、微調整によってフォントの見栄えが全然違うことに気づきます。 タイポグラフィはWebデザインを美しく見せるための必須のスキルです。 http://www.amazon.co.jp/gp/product/4797359226/ デザインのルール、レイアウトのセオリー シンメト

どうも、やなぎさわです。数知れず無料の写真素材サイトは存在すると思います。今日ご紹介する「unsplash」というサイトは、他とは群を抜いてまじで凄いんです。 何がどう凄いのかと言うと、とにかくクオリティが高いです。「え！？これで商用利用OKで無料なの？」と必ず一回は言うと思います。それに最近日本に入ってきたBlue Bottle Coffee（ブルーボトルコーヒー）の写真なんかもあるんですよ！ 提案資料にはもちろん、サイト制作の素材、写真の構図などの勉強やコレクション収集、ブログのアイキャッチなどにも重宝すること間違いありません。 写真ストックの枚数は、正直全て数えきれないのですがざっと数千枚以上。もしくは数万枚あるんじゃないかというほどあります。 クオリティの高い写真が10日ごとに10枚アップされている「unsplash」 「unsplash」 クオリティが高いこともそうなのですが、1

上、X、下、B、L、Y、R、A、そめひこです。人事部長をしています。 自社サイトの分析、競合他社、類似サイトの発掘と分析って、KPI設定や改修、WEB戦略を立てる上で、とても大事だと思います。僕はそれが結構趣味で、土日とか空いている時間に人気サイトや競合他社のデータ見ては、自社サイトと比較して「やべぇ…」って楽しんでいます。 今回はそんな僕が使っているサイト分析ツール&サービスを無料に限定して8つほどまとめてみました。これが誰かのお役に立てば幸いです。 類似サイト検索：Google https://www.google.co.jp/ 類似サイトを総合的に判断して教えてくれる！ Google検索窓に、【related:URL】と入力すると、類似サイトをピックアップしてくれます。LIGブログの場合だと【related:liginc.co.jp】となります。 しょっぱなからごめんなさい、Goog

Yamadaです。 かれこれWeb屋暦が14年くらいになるんですが、こうしてWebに携わっていると、3ヶ月周期で情報の入れ替えをしていかないと、正直追いつかないと感じます。そんな激流のようなWeb業界にこれから飛び込もうと言う新卒の方や、中途の方に送るバイブルとなればと思います。 というわけで改めて春ですし、これからホームページ（Webサイト）を作成してWeb屋さんになる方へ送るお勧めサイト集です。 後編はこちら Web制作を始める人の為のスキル・ワイヤーフレーム・SEO・マーケティング・Webサービスの基礎情報 忘れないで欲しい事 Web制作には、様々なスキルが求められます。 しかしその技術が、いつの間にか消えていったり、使えなくなったりしました。新しいデザイン、新しいコード、新しい言語、新しい環境、様々なものがあります。しかし、それらを追い続けていくうちに、一つ、とても大事な事を忘れて

どうも、やなぎさわです。やたらクオリティが高い素材サイトを偶然見つけました。質感のある写真素材〜iPhoneなどのモックアップ画像、Photoshopのエフェクト、ブラシ、さらには、Illustratorデータのロゴやテンプレートなどの素材が詰まっているサイトです。 そのサイトの名は「Dealjumbo.com」といいます。有料素材もありますが、無料で配布している素材も多く、デザイナーさんやそうでない方でも資料や、参考イメージなんかに使えると思いますので、そちらをご紹介します。 無料の素材数は、現在約200個あり、どんどん増加しているようです。 では、実際にそのサイト内にはどのような素材があるのか見てみましょう。 ぜひ覗いてほしいサイト「Dealjumbo.com」 TOPページでは、早速素材の値段などがでていますが、無料でゲットできるのは、メニューバーにある、「Freebies」からいけ

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

どうも、やなぎさわです。デザインや提案資料などに使用する写真素材を探すのって、正直めんどうだなぁなんて思ったことありませんか？ 今回は、無料で商用可の写真素材を提供している「BEIZ Graphics」というサイトをご紹介します。 素材のカテゴリーは全部で18種類あり、ストック枚数は約5,000枚あります。主に、風景などの自然写真が多いのですが、デザイナーの方ならよく使うであろう、ペイントや壁、鉄などの合成で使えそうなものまで豊富に揃っています。 これを知ったら、社長からもう有料のやつ使うなって言われるかも…。それぐらい素敵なサイトです！ 商用可・無料写真素材サイト「BEIZ Graphics」 また素材を探しに来たくなるような、とにかく使える素材が沢山あります。ブックマークしておけば便利だと思います！ 「BEIZ Graphics」 サイズも3種類あるので、使い勝手がいいですね。 それで

「私たち、無料です」──双子のHIPHOPユニット「MIKA☆RIKA」が、自分たちの写真などをフリー素材として公開する“フリー素材アイドル”を宣言し、専用Webサイトを公開しました。 なんだこのサイト！　フリー！？ 現在のサイトはβ版で写真の数はそれほど多くありませんが、12月25日の本公開後は1000以上の素材をラインアップする予定。「屋外」「生活」「ビジネス」「ポーズ」「グラビア」などなど、シチュエーションごとに写真が分類されており、目的に合った写真が選べるようになっています。 Web製作会社とかが喜びそう この一風変わった取り組みは、クラウドファンディングサイト「GREEN FUNDING」での資金調達を経て始まったもの。MIKA☆RIKAの2人は、フリー素材化が自分たちの認知拡大につながることを期待しており、「肖像権にサヨナラをし、フリー素材アイドルになることを決めました」「企業

注：今回の記事は初心者向け、Web制作を効率化＆スピードアップしてくれる「便利なHTML／CSSフレームワーク」の紹介です。 CSSフレームワークとは？ 2021年のおすすめCSSフレームワーク7個 CSSフレームワークの選び方 上の3点をお伝えしていきます。 それなのに、なぜ、カレーの画像で始まるの？ その理由は、「CSSフレームワークって何？」を知ると理解できます。 著者情報：この記事を書いた人 ウェブさえ web業界14年目。フリーランスwebデザイナーとして活動後、法人化。今でも年間100件以上のウェブサイトの企画・制作に関わっています。 ウェブさえにできること【お仕事のご相談＞サービスメニュー】 💬 𝕏（twitter）はよくフリーランスの人たちにフォローされてるようです。 Follow @websae2012 CSSフレームワークって何？ CSSフレームワークは、言い方を変

TL;DR どうすれば初心者でも「分かりやすく見栄えのするレイアウト」を作ることが出来るのか。余白の使い方や知識、さまざまなレイアウトの例をご紹介させていただきます。闇雲な配置にならないように、レイアウトを組む前に読んでおきたいこと。今回は Web デザインのセンスを上げるために、イラストや構図から学べる知識をまとめました。 レイアウトの基本知識 １．分割、対称、軸 何もない空間に要素を配置・構成していくのがレイアウト。こちらは四等分割や軸を使ったレイアウトのパターンをまとめてあるサイトです。美しく配置するために見ておきたいレイアウトパターン。 レイアウトのパターン | イディア：情報デザインと情報アーキテクチャ Photoshop の機能拡張はこちら。 黄金比・黄金螺旋・黄金三角形などをページのレイアウトや写真の構図にあてがう Photoshop の機能拡張 | コリス ２．イラストから

著者：シンタロヲフレッシュ Graphic Designer / cinematographer. 「prasm（プラズム、って読みます）」は週末だけが楽しいWeekenderではなく、1週間7日間、自分のしっくりを追い求め、日々をアップデートし続けるそんな“Weeker”に献げるブログです。 しっくりくるモノ・コトが好きなシンタロヲフレッシュがあなたの明日をしっくりさせるべく、しっくりにまつわるアレコレを書いていきます。 より詳しくプロフィールは「about」へ。

Google Web Designerの基本からアニメーションの作成までを学ぶ連載。第3回では、Google Web Designerを使って実際の業務を想定したクリエイティブバナーを作成します。 基本操作については前回の記事で解説しましたので、今回は主にアニメーションモードの詳しい使い方を中心に学びましょう。 Google Web Designerで実際にクリエイティブバナーを作成しよう 今回作成するのは、次の2つのバナーです。 1つ目は、「クイック」アニメーションモードで制作した不動産会社のバナーで、夜景の写真が横にスライドするシンプルなものです。2つ目は、「詳細」アニメーションモードで制作したカフェのバナーで、スライドとフェードを組み合わせて、複数ページを切り替えます。 「クイック」アニメーションモードで作る不動産会社のバナー 最初に、背景が横方向に流れるような動きのバナーを作りまし

地味な離島ライター内藤です。普段はコーダーとして仕事をしていますが、たまにはデザイナーさんのように人の目に触れる仕事もしてみたい！ そこで本日は、日々の業務で見かけてこれは使えるぞと思ったtableを、独自に再構築してソースコードを公開しようと思います。 table作成時に参考になるサイト 本題に入る、その前に。XPの公式サポートも終了し、HTML5＋CSS3の普及が進んでいます。今更ながら、この技術でどんなtableが実現できるのか、とてもわかりやすく説明されていたサイトをまずご紹介します。 table専門参考ページ4選 table専門の参考ページを4つほど選んでみました。 CSS3を使って美しく装飾されたテーブルの作り方｜Webpark CSS3でのtableの作り方を、見た目とソースから解説してあります。 テーブル｜CSSデザイン｜スタイルシート（CSS）｜PHP & JavaScr