Downloads Get the desktop, mobile, and font installer apps
Figma: The Collaborative Interface Design Tool
Downloads Get the desktop, mobile, and font installer apps
chot.design - 毎日ちょっとずつデザインを学ぼう
毎日ちょっとずつ、デザインを学ぼう毎日ちょっとずつデザインを学ぼうIT/Web業界のデザイン学習サイト
Web制作の時短に！2020年の便利オンラインツール・ベスト100選
この記事では、2020年に公開された便利なWebオンラインツール・ベスト100個をまとめてご紹介します。 定期的にリストアップしている最新オンラインツールまとめ記事では、2020年にかけて合計306個の新しいツールやサービスが登場しました。 その中でも、特にWebデザイン制作に便利なツールを選りすぐったコレクションで、「無料で利用できるツール」を揃えています。 これらのツールやサービスを活用すれば、Webデザイン制作をより快適に進めることができるでしょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. CSSツール（14個） 2. パターンツール（7個） 3. イラスト系ツール（3個） 4. デザインツール（10個） 5. 配色カラーツール（6個） 6. グラデーションツール（3個） 7. SVGツール（8個） 8. スクリーンショ
【2018年春】今チェックしておきたいデザインツール12選
JakeはUIデザインやWeb開発の記事を執筆するライターです。彼の仕事はあらゆるWebや彼自身のポートフォリオで見つけることができます。ツイッター@jakerocheleauから最新のアップデートをフォローできます。 デザイン業界の流れは速く、絶えず新しいツールが誕生しています。そのため、デザイナーとして最先端を走り続けるには、世の中の動向につねに注意する必要があります。 そこで今回は2018年現在、チェックしておきたいデザインツールを厳選してまとめました。これらのツールにはデスクトップのプログラムもありますし、SaaSのアプリやブラウザツールもあります。 いずれにせよ、このリストにはみなさんがチェックしたいと思うものが必ずあるはずです。詰まるところ、素晴らしいデジタルコンテンツを作ることにおいて、あなたのデザインスキルはさまざまな手段の一部に過ぎないのです。 Adobe XD Adob
ブラウザ上で超簡単にWebサイトが作れる！Bootstrap4対応のWeb制作エディタ「Pingendo」の活用ワザを一挙大公開！ - paiza times
どうも、まさとらん（@0310lan）です。 今回は、マウス操作で簡単に「Bootstrap4」に対応したWeb制作をブラウザ上で行えるサービス「Pingendo」をご紹介しようと思います。 以前から、PC向けソフトウェアとしてリリースされていましたが、最近になってベータ版ではあるものの「Chromeブラウザ」からでも利用できるようになりました！ 【 Pingendo 】 「Pingendo」は、基本的にマウスでポチポチとクリックしていくだけで、簡単に見栄えの良いWebサイトが作れてしまう便利なサービスです。 また、中・上級者向けにソースコードもすべて編集可能になっているので、自分好みにカスタマイズすることも出来るのが特徴となっています！ ■基本的な使い方！ それでは、実際に「Pingendo」を使いながら、どのようなサービスなのかを見ていきましょう。 利用するにあたり、面倒な登録やインス
レスポンシブWebデザインチェックツール | LIQUID DESIGN
スマートフォン、タブレットなど様々な画面サイズのレスポンシブ表示確認が簡単にできるチェックツールです。拡大縮小や縦横回転も自由自在。
IE8・9にもFlexboxを対応させる、flexibility.jsがとっても便利！
2016年1月5日 CSS, JavaScript 昨年からいろんなサイトで続々と実装されてきているFlexbox。従来の方法とは違い、簡単にCSSでレイアウトを組めちゃう素敵技です。しかし、Internet Explorer8や9等の古いブラウザーには対応しておらず、Flexboxを使いたくても使えない…というWeb制作者さんも少なくないはず。そんな悩みを今回の記事で解消します！ ↑私が10年以上利用している会計ソフト！ Flexboxって何？ FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃうボックスです。具体的には主に以下のような事を手軽に実装できます。 CSSを一行プラスするだけで横並びにできる！ 横並びになった要素の高さが最初から揃ってる！ 要素を上下左右、好きな順序に並び替えられる！ スペースの
今からできるWebコンテンツの次のコト
10月25日、仙台で The NEXT WEB CONTENT 2015 が開催されました。主催である株式会社インフォアクシア設立11周年記念として、Web アクセシビリティを中心に、デザイン、ユーザビリティ、SEO など、Web に関わる様々な話題を扱ったイベントになりました。トピックは広く浅いわけですが、異業種の専門家が集まることで、新たな視点の発見や共通点を見つけることができました。 本イベントの様子は Togetter #tnwc2015 をご覧ください。 Web利用は『終わった』のではなく『変わった』 ここ１年「Web は終わった」というニュアンスが含まれた話題を国内外で耳にします。Mashable が「Web Design is Dead（Web デザインは死んだ）」という記事を公開して話題になりましたし、アプリの利用時間の急増から「The Web Is Dying; Apps
食品系ネットショップのデザインはこう作る！ハイクオリティECサイト10選 - ネットショップの壺
ネットショップにおいて、商品の情報や価格と同じくらい、その商品やお店全体の雰囲気を魅力として伝えるために大切なデザイン。 今回は食品を扱うおしゃれなネットショップを集めてみました！ EC-CUBEでつくられたショップもご紹介いたします。 1.小豆島商店 http://shodoshima-s.jp/ 小豆島の特産品を販売するネットショップ。 和テイストのパッケージが引き立つ大小のパネルレイアウトで、レスポンシブもきれいに作られています。 BGMの波の音とあいまって、おだやかな瀬戸内海の風に吹かれているような気分になれるサイトです。 2.Remy お腹の底から幸せになろう。 https://remy.jp/ 料理愛好家・平野レミさんの、アイデア料理やキッチンアイテムを紹介するサイト。 お料理しながらでもレシピを見やすいレスポンシブWebデザイン対応であったり、つくりかたの動画があったりと、細
Bootstrapよりキレイ！Googleのマテリアルデザインキット - ku-sukeのブログ
Bootstrapの見慣れた感というか、モック感から脱却しようとFoundationとかに手を出しかけてたのですが、Googleがだしてきたマテリアルデザインキットがすごく良かったので紹介します。 たとえば管理画面風のデザインはこれ ほかにもBootstrap風の上部メニューのデザイン（Android）もあったり コンポーネントと呼ばれる部品も充実しています。これ見るだけで色々できそうな気がしますね！ Blog風など幾つか提供されています。いまとあるサイドプロジェクトで簡易的な管理画面をつくろうとしてたのですが、早速活用していい感じに仕上げることが出来ました。 ダウンロードすると全テンプレートが含まれているので、コピペで組み合わせるだけでも結構いい感じに出来ます。Bootstrapに飽きてきたら、ぜひ使ってみてください。 www.getmdl.io
Webデザイナーのキャリアを考える【制作会社と事業会社の違い】
Webデザイナーの求人・案件でよく目にするのが、Web制作会社と自社サービスを運営する事業会社。Web制作会社の求人・案件には、仕事内容のところに「大手サイト、有名企業Webサイトの制作」「受託」といったキーワードが、自社サービス会社の求人・案件には「自社ブランドサイト」「自社サイト」といったキーワードが多く見られます。 それぞれのビジネスモデルでは、仕事内容や必要なスキル、職場環境など具体的にどのような違いがあるのでしょうか？現役Webデザイナーたちの声をもとに、探ってみました。 ＜この記事に関連する記事＞ フリーランスのWebデザイナーになるには？【必要な準備や仕事の始め方を解説】 フリーランスWebデザイナー仕事の取り方【エージェント利用はおすすめ？】 【Webデザイナー向け】後悔しない会社の選び方！未経験必見 目次 制作会社と事業会社における仕事内容の違い Webデザイナーが制作会
コンテンツを見直すための魔法のシートが必要な理由
マーケティングとデザインの共通点 2015年6月27日大阪 Re:Creator’s Kansai 主催のイベント「基礎からきちんとマーケティング」に登壇しました。デザイナーとして働いているのでマーケティングは畑違いのように見えますが、以前からマーケティングを扱った記事をたくさん書いています。カスタマージャーニーマップのようなマーケティングの手法がデザインプロセスの一部として採用されていたり、デザイン思考がマーケティングに取り込まれているなど、共通するところが幾つかあります。 例えば UX を学んでいるうちに行動経済学に興味を持つ方もいるでしょう。行動経済学はデザインにも取り込める興味深い学問ですが、マーケッティングを深く知る上でも役立ちます。デザインとマーケティング両方に興味をもつことは、デザイナーとしてごく自然のことではないでしょうか。人のこと、市場のこと、社会のことを知らないとデザイ
デザインは基本が大切！ひとつ一つをしっかり見直しておきたい20のデザインテクニック
文字の扱い方、レイアウト、カラー、エフェクトなど、プロのデザイナーがこだわっているデザインの基本となるルールと、ついやってしまう間違いとその解決方法まで、ワンランク上のデザイナーになるためにひとつ一つをしっかり見直したい20のデザインテクニックを紹介します。 カーニングとはフォントの文字間のスペースを調整することです。カーニングの最終目的は、それぞれの文字の間が不自然な空白にならないように字面間のスペースを均等にし、テキストを美しく整然とした一つのまとまりにデザインします。 カーニングがされていない、カーニングがいいかげんな仕事は、デザインの世界において大罪の一つです。カーニングはデザイナーが早い段階で身につけるべき重要なスキルです。 20 Typography Mistakes Every Beginner Makes 基本的だけど大切なタイポグラフィのシンプルな14のルール リーダビリ
≡ ←ハンバーガーメニューのデザインでクリック率は違う（2014年のA/Bテストの結果から）
スマートフォン対応サイトで右上や左上にある「≡」こんな形の三本線のメニューはいわゆるハンバーガーメニューと言いますが、ハンバーガーメニューのデザインに関してA/Bテストを行っていた記事があったので紹介します。 ●ハンバーガーメニューのデザインパターンハンバーガーメニューは色々なデザインがあって、例えば以下の様なパターンがあります。（サイトイメージは「グラシン工房」から） まずはBootstrapの標準に近い形式。三本の線があるだけのパターン。 次に三本の線のしたにメニューという文字を配置して、アイコンの意味を説明するパターン。 三本線を線（border）で囲い、ボタンらしく見せるデザインのパターン。 他にもいくつかデザイン・表現方法がありますが、それは前に書いた「【Web制作】スマートフォンサイトのメニューのアイコンデザイン・表示を比べてみた」の記事をご覧ください。 ●アイコンだけ・文字付
世界が注目している！クリエイティブがすごい日本のWeb制作会社・クリエイター集団のまとめ
同じWeb制作者としてよいインスピレーションを受けるだけでなく、一緒に作ってみたいと思ったり、クライアントとして声をかけたくなるような注目しておきたい魅力的なWeb制作会社・クリエイター集団を紹介します。 そのクリエイティブなアイデア、クリエイティブなデザイン、クリエイティブなインタラクション、創造力をかきたてます！ 世界中のかっこいいWebサイトをピックアップするAWWARDSのブログで日本の制作会社が特集されていたので、実績サイトと合わせて紹介します。 A Look at Japanese Web Design いくつかの会社では人材募集をしているので、気になった人は門を叩いてみるのもいいと思います！ 株式会社 STARRYWORKS 昔からの伝統的な技能と新しいテクノロジー、どちらも理解した上でのもの作りにこだわった大阪の制作会社。「アシタノシカク」はCanvasを使って四角がうねう
第9回 Webデザイナーが押さえておくべき、内部SEO施策18のポイント - MdN Design Interactive
知ってるつもりで意外と知らないSEO最新のキホン 第9回 Webデザイナーが押さえておくべき、内部SEO施策18のポイント 2015年03月24日 TEXT：押谷圭佑（ヴォラーレ株式会社） こんにちは。ヴォラーレ株式会社の押谷です。前回はリニューアルにおけるSEOの全体感の説明をしましたが、今回はより実践的で細かな施策を紹介します。 クライアントに「いま手がけているWebサイトのSEOもお願いしたい」と依頼された経験のあるWebデザイナーや、Web担当者を兼務しているWebデザイナーは、WebサイトのSEO対策を考えたことが一度はあると思います。そうしたWebデザイナーのために、押さえておくべき18のSEO内部施策に関するポイントを紹介していきます。 ■HTMLの調整 基本的に、1ページに対して1テーマ（キーワード）として対策します。これはSEOにおけるHTMLの調整の基本であり、対策する
jQueryプラグイン「Waypoints」でスクロール中に要素が出現するサイトを作ろう！ | Neganin(ネガニン)
2. ダウンロード 「jQuery」本体はダウンロードするか、Googleにホストされているファイルを読み込みましょう。 「Waypoints」のバージョンは3.1.1です。下記サイトからダウンロードし「lib」フォルダ内の「jquery.waypoints.min.js」を使用します。 jQuery Waypoints <header id="header"> <h1>Waypoints</h1> </header> <p id="text">jQuery Waypoints Demo</p> <div id="content"> <div id="wrapper"> <section class="section"> <figure class="thumb"><img src="img/thumb1.jpg"></figure> <h2>Title</h2> <p>Text Text
[JS]Lightboxの進化形！操作性が快適でフラットなデザインにもぴったりなレスポンシブ対応のスクリプト -Strip
スマホなどの小さいスクリーンでは昔からあるLightbox風の体験を与え、より大きいスクリーンではページ上にインタラクションのスペースを残すよう設計された、画像や動画をアニメーションで拡大表示させるjQueryのプラグインを紹介します。 フラットなデザインにも相性が非常によく、操作も快適でエレガントです！ しかも、IE7+にも対応。 Strip Strip -GitHub Stripのデモ Stripの使い方 Stripのデモ デモはChrome, Safari, Firefox, Opera, IEは7+、iOS5+, Android3+でご覧ください。 各画像をクリック・タップすると、拡大画像がスライドして表示されます。 拡大時はそのまま他の画像も表示できるギャラリー機能にも対応しています。 デモ：幅780pxで表示 スライド表示させるのは画像だけでなく、YouTubeやVimeoなど
![[JS]Lightboxの進化形！操作性が快適でフラットなデザインにもぴったりなレスポンシブ対応のスクリプト -Strip](https://cdn-ak-scissors.b.st-hatena.com/image/square/b4b391a890221ac5696699ef145a5921c27e5824/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014100601-01.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML／CSSコーディング時間を激減させる「Creative Cloud Extract」と、その真価を引きだすための10のポイント
新着記事
