無料ダウンロード可能なハイクオリティアイコン総まとめ2013年版
2013年として最近のフリーアイコンを探すと、どこもかしこも「フラットアイコン」ばかりでしたが、一つここで総まとめしておきたいと思います。 フラットアイコンも、よーくみるとそれぞれ若干の違いや特徴があるんだなと、並べてみるまであまりわかりませんでしたが・・。というわけでして、無料アイコンをお探しの方はチェックしてみてください。 フラット無料アイコン ソーシャルメディアフラットアイコン。 ソーシャルメディア、ブラウザ系の無料フラットアイコン フラットUIアイコン iPhoneアイコン用PSDファイル 各種ファイル用のフラットアイコン1 各種ファイル用アイコン2 フラットアイコン Vol.1 フラットアイコン Vol.2 フラットアイコン Vol.3 フラットアイコン Vol.4 サークルバッチ型の無料アイコン いろんな形のソーシャルメディア用フラットアイコン WebサイトUI無料アイコン 各
Strikingly - あなただけのウェブサイトを制作するための、最高のウェブビルダー
数分でウェブサイトを制作する ブランドを確立。世界を制覇。 コードはなし 、デザインのスキルも必要ありません。
使えるとレスポンシブWebデザインに便利なCSS
デフォルトのボックスモデルではwidth、heightの値にはpaddingとborderの値を含みませんが、box-sizingプロパティの値にborder-boxを指定すると、widthとheightの値はpaddingとborderの幅を含むようになります。 #box-sizing{ -moz-box-sizing: border-box; box-sizing: border-box; } 特にコンテンツの幅を指定するときや、Fluid Grid Systemを作成するときに計算が簡単になります。 例えば以下の図のような4カラムのGrid Systemで2カラム分の相対幅を求めるとします。 デフォルトの場合2カラム分の幅は60px×2+20px=140px、全体の幅は320pxとなるので、140÷320×100=43.75%となります。これにmarginやpaddingでガターの幅
Web業界で活躍する日本人の素敵な名刺デザイン 2013年版
2016年2月18日 インスピレーション, 名刺 名刺を交換する度に思うことですが、やはり名刺に書かれた内容やデザインが会話のネタになる事が多いです。素敵なデザインの名刺はもらっても嬉しいですよね！今回日本のクリエイターの方に名刺を頂く機会があったので、以前書いた「国内Web業界で活躍する方の素敵な名刺デザインいろいろ」の2013年版という事で記事にまとめてみます。デザインの参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ オフ会に参加しました 仲良しのバンクーバーのうぇぶ屋のセナ君がカナダから日本に一時帰国するってことで、5月25日に大阪で開かれた「バンクーバーな僕らと仲良しになろうパーティー！」に参加してきました！鹿児島からの参加者や、東京から日帰りで〜なんていう強者も…！仲良くしてくださった皆さんありがとうございます！ 私はバンクーバーな僕らというWebマンガの登場
エンジニアやデザイナーになりたい大学生がチェックしておくと良いおすすめブログ8選！｜キャリアバイトコラム
最近は、Webエンジニアやデザイナーを目指す学生が増えています。 ネット上でも様々な学習サービスがある為、一気に敷居が低くなっとというのが大きいでしょう。 そんなWeb制作やデザインを学び始めた人が、書籍や学習サービスとともに、チェックしておくと良いブログをピックアップしてみました。 Webクリエイターボックス HTMLやCSS、WordPressなど、フロントエンド周りについて、非常にわかりやすく書かれているブログです。 運営されているManaさん自身は、カナダのバンクーバーでWebデザイナーをしており、最新の情報にも敏感で、初心者以外にも役立つ記事が多いです。 全くWebデザインをしたことがない、いまいち理解できない、そんな人には是非読んでほしいブログです。 【おすすめ記事】 ・WordPress オリジナルテーマの作り方 3.0+ ・実践で学ぶWebサイト制作ガイド
ノンデザイナーこそ押さえておきたい! 配色・レイアウトの基礎が学べる7個の厳選スライド
まだまだメンバーの数が少なく、職種ごとの距離が近いスタートアップ。デザイナーの仕事をディレクターやエンジニアが理解することが、プロジェクトを円滑に進める秘訣です。 デザイナーではない方々にとって、デザイナーが普段何を悩み、どのようにWebデザインしているのか知るのは、非常に重要と言えるでしょう。今回は厳選した7つのスライドをご紹介しながら、「配色」「レイアウト」といったデザインのエッセンスを学びます。 もちろん、本職のデザイナーの方にも役立つスライド7連発です！ １．色彩センスのいらない配色講座 7000いいね! されたスライド 「時間がない！ 今すぐ作り始めないと納期に間に合わない！ でもどんな色を使ったらいいか分からない！」そんな人におすすめなのがコレ。Facebookで7000以上のいいね!がついた、@marippe_さんのモンスタースライドです。 配色や明度・彩度の基礎をお
今年注目のフラットデザインを採用している海外の素敵なWebサイト 60
AppleもiOS7で採用すると噂され、今年注目されているフラットデザイン。ただ実際にフラットデザインを採用してWebサイトを制作するのは難しかったりしますよね。そんなフラットデザインを採用していて参考になるWebサイトを集めてみました。 紹介しているフラットデザインについて フラットデザインに明確な定義があるわけではないので、ドロップシャドウやグラデーションを極力使わず、ミニマルで色使いが上手いと思ったWebサイトを個人的な主観で集めています。参考程度にしていただけると嬉しいです。 1. oak.is 2. It's a Shape Christmas 3. William Leeks 4. Etch 5. bioipsum 6. Mark Simonson 7. Flaticons 8. LayerVault 9. Combadi 10. Lorenzo Verzini 11. Gec
デザイン怖い話「これは本当に私の頭で考えて生み出されたものなのか？」
これはどうでもいい話なんですけどなんかこう考えると怖いなー、と思った話です。あと念のために言っておくと「パクリ」とか「本当に新しいアイディアなんてない」とかそういう話ではないです。 規則性と不規則性を使いこなす 先週[webデザイン]規則性と不規則性を使いこなすという記事を書いたんですけど。 この記事は、基本的に人の目は規則性のあるものに安心や調和、洗練された印象を受けるので規則性にしたがって整ってた方がいいんだけど、上手いタイミングでそれを外したりしないと印象にも残らないし面白くないものになるし、個性も出せないよねという話でした。 ちなみに規則性の効果については以下の記事でも述べています。 [フォント・デザイン]水平・垂直・傾斜・円弧・不規則 – WEBCRE8.jp 自由なようでいて法則を持ったもの で、なんとなく、普段の制作で自分の発想に基づき規則性から外れた不規則性を作ったと思って
ウェブデザイナーは知っておきたい、ページレイアウトの代表的な10のパターン
実際のウェブサイトを例に、ずっと廃れないであろうページレイアウトの10のパターンとその特徴を紹介します。 10 Evergreen Website Layouts (that will never go out of style) [ad#ad-2] 下記は各ポイントを意訳したものです。 2カラム、広いヘッダ 3カラム、広いヘッダ フォーボックス 不確定なグリッド 大きいスクリーンショット シングルカラム 打ち出し画像 固定サイドバー グリッドベースのギャラリー マガジンスタイル [ad#ad-2] 2カラム、広いヘッダ これは最も普通のレイアウトと言ってもよいでしょう。広いヘッダが上部にあり、960pxを2カラムにし、一つは広く、もう一つは狭くしたものです。狭い方はサイドバーでナビゲーションなどが設置してあります。 慣習的に、ブログでは広い方の右にナビゲーションを置き、スタティックなサイ
ウェブデザインに黄金比やフィボナッチ数列など数学的な要素を取り入れる方法
黄金比、フィボナッチ数列、ファイブエレメンツ、サインウェーブなど数学的な要素を巧みにウェブデザインに取り入れる方法をSmashing Magazineから紹介します。 Applying Mathematics To Web Design 下記は各ポイントを意訳したものです。 また、当サイトでも黄金比をウェブデザインに取り入れる簡単な方法を紹介していますので、あわせてどうぞ。 黄金比をサイトのデザインに取り入れる簡単な３つの方法 はじめに 1. 黄金比（黄金四角形） 2. フィボナッチ数列 3. ファイブエレメンツ 4. サインウェーブ [ad#ad-2] はじめに 「数学は美です。」 数字嫌いの人には、ばかばかしく聞こえるかもしれません。けれども、自然や宇宙にある美しいもの、最も小さい貝殻から最も大きい銀河まで、数学的な要素を持っています。 数学ははるか昔から今日まで芸術や建築のデザインに
新人デザイナーならブクマして損なしのWebデザインギャラリーサイト
【フレッシュなWebデザイナーの皆さんへ】数ある... / ━━国内ギャラリーサイト━━イケサイ、ABM、S... / 【イケサイ】国内のコーポレートサイトが中心のデザ...他...全14件 【フレッシュなWebデザイナーの皆さんへ】 数あるWebデザインギャラリーサイトの中で、新卒Webデザイナーがとりあえず毎日見ておけば間違いない特にオススメのギャラリーサイトをまとめました。
Xlune::Blog
可変グリッドレイアウトjQueryプラグイン(jquery.vgrid.js) なんだか可変グリッドレイアウトがまた流行ってる（？）ようなので、jQueryプラグイン書いてみた。 一通りブラウザで表示確認ぐらいはしたけど、テストは十分じゃありません。 Demo Demo Index 利用方法はデモのソースを確認してください。(ウィンドウリサイズして動きも確認してね) Download github zip file 利用には、jQuery本体とjquery.easingプラグインが必要です。別途読み込んでください。 更新情報 v0.1.8 (20120421) display属性で、グリッド要素の表示/非表示を切り替えれるように修正しました。 demo009を追加 v0.1.7 (20111110) 複数の可変ボックスを指定すると、開始位置がおかしくなるバグを修正しました。 demo008
制作中のWebサイトにシンプルなグリッドを表示させる制作補助系jQueryプラグイン・Simple Grid
昨日TwitterでもPostしたんですけどやっぱり たまに使いそうなのでメモ。数値を設定する だけで簡単にシンプルなグリッドを重ねる事 が出来るWeb屋さん向けのjQueryプラグイン・ Simple Gridです。いちいち拡張やブックマー クレット使うのも面倒ですしね。 制作中のサイトにこのプラグインを入れるだけでグリッドを表示できるので場合によっては手間が省けるかもしれません。オンオフも簡単に切り替えられるのもメリットです。 こうしてグリッドを重ねられます。微調整で結構時間取られるので楽っちゃ楽かも。 グリッドの調整は簡単で、jQueryとプラグインを読み込んで下記のように設定するだけです。 <script type="text/javascript"> $.simpleGrid({ rowHeight: 20, columnWidth: 30, gridWidth: 960 });
レイアウトが考えやすくなるデザインのルール ｜https://wp.yat-net.com/name
デザインには意味があります。物を配置するにしても、なぜそれを配置するのか？なぜその色味なのか？なぜそこに置くのか？など、実に多くの事を考えてデザインは行われています。 そのためデザイナーが考える事は実に沢山有り大変なのですが、デザインには決められたルールという物が存在し、「こうしなければならないルール」、「こうしてはいけないルール」と言ったものが多数存在します。 デザイナーはそういったルールを知識として蓄えているので、考えるべき点を素早く整理し形にしていくことが出来るのです。 今回はそのルールについて少し述べたいと思いますので、デザインが苦手な人も是非そういったルールについて考えてみて頂ければと思います。 レイアウト ビジュアルは左、テキストは右 人間の脳は左側に配置されたものを感覚的に美しいと感じやすく、右側に配置されたものを理論的な思考で捉えやすくなっています。そのため上記のような写真
日本のスマホサイトは2年間でこんなに変わった (1/4)
スマートフォンやタブレット端末といった、いわゆる「スマートデバイス」を意識したWebサイト制作はもはや常識となっている。各企業のWebサイトは、次のような方法でスマートデバイスに対応していることがほとんどだろう。 スマートフォン向け専用サイトを構築する レスポンシブWebデザインで Webサイトを構築する viewportを調整する Web Professionalでは、2011年2月、有名企業のWebサイトがスマートフォンにどのように対応しているかを紹介した。 これらのサイトは、2年経ってどのような変化を遂げたのか。本記事では、取り上げたサイトに再び訪れ、サイトデザインのトレンドがどう移り変わったのかを観察。日本のスマホサイトの「BEFORE & AFTER」を紹介しよう。 半数以上のサイトがリニューアル まず、調査したサイト数に対してリニューアルしたサイトと、大きくは変化していないサイ
シンプルで美しいウェブサイトをたった数分で作成できるサービス「Strikingly」 | ライフハッカー・ジャパン
単純明快なウェブサイトを作成したいなら、そのプロセスをシンプルにしてくれる「Strikingly」がオススメです。サイトのベースを選択し、画像とテキストを入力すればすぐにウェブページの完成です。ほんの少しの情報でもサイトを作成することはできますが、筆者はStrikinglyを使ってポートフォリオ全体をアップしようと試みたそう。画像や絵の追加、動画などのアップには何の問題もありませんでした。ただ音声だけのファイルには対応していないようです。作ってみたところ、このような感じのポートフォリオサイトが完成しました。 Strikinglyへのアップロードはパソコンからだけでなく、インターネット経由でのアップもできます。動画の追加はURLをペースト、画像の追加はドロップゾーンへドラッグすることによって可能です。写真には数十種類のフィルターもかけられます。 Strikinglyは機能的に限界がありますが
プロ根性のあるデザイナーやブロガーにお勧めする4つの画像編集ソフト
素人とプロを分ける4つのソフトを紹介します 少しでも早く、少しでも的確に伝えたい。そんなプロ根性を支える、無料ソフトを紹介します。 「しょせんは無料ソフトでしょ？」とあなどる無かれ、プロのデザイナー御用達のPhotoshopでもできないことをやってのけます。 目次 PNG画像を劣化させること無くサイズを圧縮する「PNGGauntlet」 JPEG画像を劣化させること無くサイズを圧縮するソフト「carmine」 JPEG圧縮で劣化した画像を綺麗に直す「Jpeg Enhancer」 デジカメの高感度ノイズを除去する「Neat Image」 PNG画像を劣化させること無くサイズを圧縮する「PNGGauntlet」 WebでPNGを圧縮してくれるサービスは多々ありますが、ネットワーク経由のやり取りのため、利用者の多い時間帯にはレスポンスが悪く、エラーで処理できない場合もあります。 WordPres
「Webサイトの配色で困った！」→「HUE/360使えば良いじゃない」
Webサイト制作で避けて通れない配色の決定。芸術的素養が絶望的にないのでいつも泣いてるゴロドクさんです、どうも。 所詮素人には理論に基づいた配色など無理ゲーです。先日もちょっとしたデザイン的なゴニョゴニョという場面に出くわしましていつものように悩みつつ、なんか配色決定のためのWebサービスないかなーと思って探してたらこういうのを見つけました。 webでの色指定は基本的にRGB値での指定となりますがこれって光の三原色の混色なんですよね。 実際にCSSなんかで数値いじりつつデザインしてると「なんか違うなー」というときにもっと明るくしようとか、もっと彩度上げようってのが感覚的にどの数値をどんだけいじって良いのかってわからないんですよ。 RGB値直接いじって彩度上げようと思ったらくすんじゃった上に色みかわっちゃってオヤオヤ残念なんて日常茶飯事ですよ（いやそのまえにフォトショなりなんなりでデザインカ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【デブサミ2013】15-C-4 レポート 「無償でここまで使えるアドビのWeb制作ツール」
プロデザイナー御用達「Linotype」の高品質なフォント（5万円相当）が期間限定で無料でダウンロードできますよ