これで無料とはすごい！Mac, Win, Linux対応、デザインの指示書やスタイルガイドを簡単に作成・共有できる -Zeplin
デザインの指示書やスタイルガイドを作成するのは、なかなか時間がかかりますよね。 使用している要素のサイズやマージンやカラーやフォントなどの情報を自動で取得したり、コメントを添えたり、指示書やスタイルガイドをプロジェクトのメンバーと共有できる「Zeplin」を紹介します。 1プロジェクトまで完全無料、2つ以上から有料ですが、機能制限などは一切ありません。 Zeplin Zeplinの特徴 Sketchでの下準備 Zeplin ソフトウェア版 for OS X Zeplin ブラウザ版 for OSX, Win, Linux Zeplinのインストール Zeplinの特徴 Zeplinは、Sketchで作成したデザインリソースから指示書やスタイルガイドなどを自動で生成するソフトウェア（無料）とオンラインサービス（無料と有料）です。 無料と有料の違いはプロジェクト数だけで、機能はまったく一緒。
最低限これだけ覚えればemmetの恩恵にあずかれるかもな考え方のヒント | バニデザノート
Emmet（旧 zen coding）を、できるだけ覚えずに入門するための、考え方を紹介します。 zen codingのときに私は一回挫折というか、面倒だなとおもって放置していた方で なんで面倒と思ったかというと、速さに気を取られて一文で（何行ものHTMLを一発で＝爆速を再現するため）長い呪文のような命令文をみて「あーだめだ」って思ったんですよね。 そのあたりも踏まえて、爆速にはならないかもしれないけど、短い文で面倒なコーディングを少しだけ楽にする基本を書いてみたいとおもいます。 Emmetは、gitのようにサーバーとつないだり、Sassのようにコンパイルの設定が不要です。 必要なのは、使っているエディタにemmetのプラグインをインストールするだけ。 Atomだと、Emmet plugin Atom editorとか、sublime text だとこのあたりの記事が役に立つのかな。 （C
UIデザインを作成するとき、“実際のデータ”を意識しなければならない理由 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。Pooleチームのデザイナー、�コーリーです。 先日デザインをしているときに、“UIデザインとデータの関係”が気になりました。 皆さんは、新しいサービスのUIデザインを作成する際、どんなユーザデータを使用していますか？ 仮想のデータを入力していると、想定外のことが起きたときに対処できなくなるかもしれません。 そこで今回は、UIデザインを作成する際に実際のデータを意識しなければならない理由と、データを使用するために便利なツールをご紹介したいと思います。 “実際のデータ”を意識すべき理由 データの値によってデザインが崩れることは多々あります。 例えば先日、メンバーページのUIデザインが一瞬崩れたのですが、原因はメンバーの1人である「野田クラクションベベー」の名前が長すぎたことでした。 このように、SketchやPhotoshopなどでせっかく綺麗なデザインを作っても、実際のデータと
あなたも店長になれる！無料で簡単にネットショップを作成できる方法8個
ネットショップを開きたいあなた。 以下のような不安を抱えていませんか？ 難しそう お金がかかりそう ご心配なく！ 実は、最近ネットショップを無料で簡単に作れる方法が増えてます。 今回の記事で紹介する「ネットショップ作成サービス」を利用する方法です。 無料＆簡単だからといって、中途半端なネットショップしか作れなかったら困りますよね。 その点も心配不要！ 月商100万円以上も狙える本格的なネットショップを作れます。 ただ、難しいのは、どの作り方を選ぶべきか？ 特に「今回が初めてのネットショップ」という初心者さんは悩んでしまうでしょう。 そこで今回は、以下のように前半と後半に分けて、おすすめのネットショップの作り方について詳しくお伝えしたいと思います。 著者情報：この記事を書いた人 ウェブさえ web業界14年目。フリーランスwebデザイナーとして活動後、法人化。今でも年間100件以上のウェブサ
サイト分析やWeb制作・執筆をスピードアップ！おすすめブックマークレット13 - Design Color
ブックマークレットとは？ ブックマークレットとは、一言で言えばブラウザにWebサイトへのリンクではなく“機能”をブックマークしておくもの」です。ブラウザに登録するところまでは一緒なのですが、そのブックマークレットをクリックすることで様々な機能を使えるようになります。 「拡張機能やアドオン使えばいーじゃん！」という考えもあるのですが、拡張機能やアドオンは結構PCのメモリを消費してしまうのですよね…。なので、ちょっとしたことをするならばブックマークレットを使ったほうがPCのメモリの節約になるのでオススメです！ サイト運用・分析に使えるブックマークレット あらゆるSNSでの反響がすぐに分かる！「ソーシャルてんこ盛り」 まずは私が１番お世話になっているブックマークレットである「ソーシャルてんこ盛り」。これ1つで気になるページのSNSでの反響をいっぺんに知ることができます！また、このブックマークレッ
無料のスマホサイト作成ツール5個｜スマホ対応ホームページの作り方
1500以上の会社、お店が利用中の月額無料HP制作サービス 「HPの制作を安心して任せられる業者が見つからない＞＜」 そんなふうに頭を悩ますアナタ。 以下の「ウェブさえパック」はもうチェック済みですか？ HPを作るのに必要なものがパッケージになってるお得なサービスです。 料金と事例を見てみる なぜ、スマホ未対応のホームページは時代遅れなの？ その答えは非常にシンプル。 なぜなら、今が「ほとんどの人がPCではなくスマホでホームページを見ている時代」だからです。 この数字が何を表しているかご存知でしょうか？ スマホ： 83.4% パソコン： 69.1% これは、「総務省」が発表した2019年のIT機器の世帯保有率です。（詳しいデータはこちら） なんと、パソコンよりスマホを持つ人のほうがはるかに多いんですね！ こんな世の中ですから、よりたくさんの人にホームページを見てもらいたいなら、スマホサイト
Webデザインの勉強を始める人が幸せになれるツール＆サービス
2015年7月7日 便利ツール 先日超初心者さん向けにHTML・CSSを使ってWebページを作る講座を開いたのですが、予想通りやはり「これから勉強したい！」という人は、何から勉強すればいいのかがわからない事が多いです。また情報が多すぎて必要なツールもどれを選んだらいいかわからないケースもよく耳にします。そこで今回はその時教えたツールやサービスを中心に「これだけはそろえておこう！」というものを紹介します。あまりたくさん挙げても使い切れないかなーと思ったので、かなり絞っています。まずはこれらをとっかかりにし、自分好みのものを探していってくださいね！ ↑私が10年以上利用している会計ソフト！ 環境を整えよう まずはWebサイト制作をするための環境を整えましょう。 テキストエディター テキストエディターは、HTMLやCSSなどを使ってWebページを作成する際に使うツールです。Windowsに最初か
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
クリエイティブなファビコンを設置しよう
2017年9月22日 Webサイト制作, 便利ツール Webサイトの制作時に、特に初心者さんが設置を忘れがちなファビコン。Webサイトをブックマークした際や、タブ表示した際にサイト名の横にちょこんと表示されている小さなアイコンのことです（Favourite + Icon = Favicon）。デバイスが増え、これまでとは設置方法が少し変わってきているのと、機能のついたファビコンも増えてきているので、その辺もあわせて紹介します！ ↑私が10年以上利用している会計ソフト！ ファビコンをデザインする ファビコンは16×16ピクセルとかなり小さいながらも、その存在は偉大です。複数のタブを開いている時や、ブックマークリストの中から、ひと目見てどのサイトか区別できるからです。 多くの場合、そのWebサイトのロゴマークを縮めたり、簡略化したものがファビコンデザインとして採用されています。CHANEL、A
プロ御用達！WEBデザインに役立つデザインツール13選
更新日: 2017年9月26日公開日: 2015年6月10日プロ御用達！WEBデザインに役立つデザインツール13選 忙しい web デザイナーの方、web デザイン勉強中の方、CSS やプログラミングからチョット目を離してデザインツールを見直してみませんか？ 今までやっていた作業、可視化に時間のかかっていた作業を劇的に変えてくれるツールがたくさん存在します。チョット作業の手を止めて、以下のツールを覗いてみてください。きっとこれからのあなたの web デザインを快適にしてくれますよ！ WEBデザインに役立つデザインツール 13選プロ顔負けのデザインツール「webflow」 webflow 対応 / Mac、Windows 価格 / 無料 ～ $84 /月 表示言語 / English Free トライアル / 有 デザインには自信があるけれど、実はプログラミングはチョット苦手、という方にお勧
縦に長い画像を1枚で印刷する際に自動分割してレイアウトするツール「Print1」 | WebNAUT by Beeworks
モバイルサイトのデザインデータなど、縦長の画像を自動分割して印刷用に1枚にまとめるツールを作成しました。 データのアップロード等も不要ですので、機密性の高いデータを印刷する場合でも安心して無料でお使いいただけます！ 明けましておめでとうございます。本年もWebNAUTをよろしくお願い致します。私の新年1本目の記事は特に正月らしい内容ではありませんが、Web制作の各場面で使える「痒い所に手が届く」ツールを紹介させていただきます。 デザイン確認時のよくあるやりとり ディレクター： ここでディレクターさんはデザインの確認と指示出しをどのように行うでしょうか？ デスクトップ上で修正指示を書き込むようなアプリも幾つかありますが、やはり見やすさや書き込みのしやすさでは紙に印刷して手書きで指示を書く事が多いと思います。 その際、縦に長い画像を印刷しようとすると一般的なアプリではこのようになってしまいます
ココを押えておけばCSS3がだいたい分かるツール集 | 日刊ウェブログ式
CSS3 Generator CSS3の各ブラウザごとの対応状況の確認とソースコードの生成が同時に行える便利ツール。対応状況はブラウザのアイコンの上にカーソルを持っていくと表示されます。 Official Site CSS3 Gradient Generator v2.0 グラデーションのコードを吐き出すツール。カラーピッカーなどを使って直感的に操作できる Official Site CSS Border Radius ボーダーの角丸を表現するコードを吐き出すツール。四辺の周囲にある数値を変更するだけです。 Official Site Button Maker 画像を一切使わずにCSSだけでクールなボタンを作成。グラデーション、角丸、影などの調節が可能 Official Site CSS3, please! 左側のコードを書きかえると、プレビューが右上のプレビューが変化します。CSS3テス
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Open Graph Config Tool
PageSpeed Insights
Online Mockup, Wireframe & UI Prototyping Tool