Figmaがこれからの人にも、すでに使用中の人にもいい！公式より快適に動作するmacOS用アプリ -Figmac
Figmaがこれからの人にも、すでに使用中の人にもお勧めです。macOS対応の公式より快適に動作するFigmaアプリを紹介します。 .figファイルはもちろん、.sketchファイルを編集したり、.pdfに書き出したり、共同作業やバージョン管理なども簡単にできます。 Figmaは無料で利用でき、Figmacも無料で利用できます。 Figmac Sketchファイルを開きたいけど、Sketchがない人にも便利です。 Windowsの場合は、下記をご覧ください。 SketchファイルをWindowsで開いて、編集・保存できる無料アプリが登場 -Lunacy Figmacの特徴 Figmacのダウンロード Figmaとは Figmacの使い方 Figmacの特徴 Figmacは、BlocsやSolisなどのmacOS用のUIデザインツールを開発したNorm氏の新しいアプリで、Figmaの公式アプ
フローチャートなどが簡単に作れるwhimsical - bagelee（ベーグリー）
はじめに 本記事ではフローチャートと図が簡単に作れるwhimsicalというツールをご紹介します！ whimsicalは簡単に素早くフローチャートが作れるツールです。 Product Huntで2月15日に「Product of the Day」として紹介されています。 Whimsical on Product Hunt 今回の記事では、そんなwhimsicalを少し深掘りし、どういったことが出来るのか、また、実際にwhimsicalを試してみた感想などをご紹介します。 whimsicalとは whimsicalは簡単にフローチャートと図が作れるツールです。 ポストイット風のノートやワイヤーフレーム、マインドマップなども作れるようになる予定ですが、現在はフローチャートと図を作る機能がサポートされています。 ワイヤーフレームに関しては、こちらの記事でも軽くご紹介しているので、ご興味ある方はぜ
コーディング作業はもう一切不要！2.0でものすごい進化を遂げた、国産の無料デザインツール -STUDIO 2.0
去年当ブログで紹介した際にも評判が高かったSTUDIOが、満を持して2.0にアップデートされました！ STUDIOはコーディング作業は一切不要で、Webサイトやスマホアプリのデザインを積み木感覚で楽しくデザインできるツールで、無料で始めることができます。 STUDIO STUDIOの特徴 STUDIOの使い方 STUDIOの特徴 STUDIOは無料で利用できる国内産のデザインツールで、Webサイトやスマホアプリのモックアップ作成から、デザイン、さまざまな実機でのプレビュー、公開、そして運用や解析まで、それぞれの専門知識に詳しくなくても簡単にできます。
DevToolsでz-index一覧できるやつ作ったよ。 | Ginpen.com
Chrome用とFirefox用です。 GitHubでソースコード公開してます。 ginpei/devtools-z-index 見た目 Chrome版。 Firefox版はサブペインじゃなくてパネルとして追加するのでちょっとアレです。仕方なかった。 はじまり コードスニペット版。これはこれで手軽でよろしいね。 ページ中の要素を `z-index` の数字が大きい順に一覧表示するやつです。https://t.co/gNGkdP03ta pic.twitter.com/v0VRNKCKel — 高梨ギンペイ (@ginpei_jp) June 11, 2018 Chrome版について https://chrome.google.com/webstore/detail/bcnpmhefiohkpmjacfoanhbjhikegmoe/ Elementsパネル内に “z-index” ペインを追
プログラムやウェブ開発の知識なしでもブラウザだけでアプリが作成できるサービス「KickAppBuild」でショップアプリを作ってみた
ネットショップアプリなどのスマートフォン用アプリの作成が可能な「KickAppBuild」は、クラウド上に用意された48種類以上のテンプレート使う事により、まるでパズルピースをはめるような感覚で短時間にスマートフォン用アプリの作成が可能です。さらに、テンプレートを使うだけではなくHTML、CSS、JavaScript、そしてjQuery Mobileの知識があれば個性的なアプリを作る事もできるとのこと。作成できるアプリのプラットフォームはiPhone、iPad、Android OS、そしてKindleです。実際に作成できるアプリの一つネットショップアプリを実際に作ってみました。 Apps Builder - Build & Publish Powerful iPhone & Android Apps. No Coding. http://kickappbuilder.com/ 「KickA
AIボットと会話するだけでウェブサイトをデザインできる FireDrop
どんな感じでデザインが作られて行くのか、デザインの流れをざっくり説明してみます。 基本的に、FireDropのウェブ画面上で操作をしていきます。 画面は、２つの部分にわかれていて、デザインしているウェブページの表示部分と、AIボットのサーシャと会話する会話部分にわかれています。画面向かって左側が、デザインWebページ表示部分、向かって右側がボット会話部分になります。 基本的には、デザインWEBページ部分はいじることはなくて、サーシャとの会話をしていくだけです。 会話の内容としては、サーシャがウェブデザインをするうえで必要な質問を投げかけてきます。 「WEBページのどこを変えたいか（何がしたいか）」 「WEBページのメインの色はどんなのがいいか」 「レイアウトはどれがいいか」 こんな感じで質問されるので、その質問に答えていくと、画面の左側のデザイン表示部分で、デザインが進んでいきます。 Fi
パスワード認証
シンクゼロマガジン・ライト版 Creative Edge School Books の宣伝用マイクロブログギング。 企画・制作・販売している学習コンテンツのリリースやキャンペーンなどの情報をお知らせしています。 URL: http://design-zero.tv/ 公式サイトをご覧ください。 現在、ブログを公式サイト（ http://design-zero.tv/ ）に移行中です。 公式サイト（ http://design-zero.tv/ ）には活動報告や学習コンテンツの情報を掲載しています。
レスポンシブの確認ツール、後発だけに便利！スマホ・タブレットの主要なデバイスでの表示確認が同時にできる -Sizzy
iPhone, iPad, Nexus, Galaxyなど、主要なスマホ・タブレットの表示確認が同時にできる、レスポンシブ用の確認ツールを紹介します。 最近リリースされたばかりで、現在の対応デバイスにあった便利なツールです。 Sizzy Sizzy -GitHub Sizzyの特徴 Sizzyの使い方 Sizzyの特徴 Sizzyはオンラインツールとして利用でき、Chromeの機能拡張にも対応しています。動作は非常に軽快で、スマホ・タブレットの複数のデバイスで同時に確認ができます。 Sizzyの動作デモ 現在用意されているデバイスは、8種類。 iPhone 4: 320x480 iPhone 5: 320x568 iPhone 6: 375x667 iPhone 7 Plus: 414x736 iPad Air: 768x1024 Nexus 6P: 411x731 Galaxy S4:
Webサイトに動画を埋め込む際のサイズと軽量化方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、HALです。 今回は、動画をWeb用に軽量化するための方法を紹介します！ 軽量化を行わないと、たとえば 1280px × 720pxの30秒ぐらいの動画の場合40MBほどの重さになってしまいます。そのままだと videoタグなどでWebブラウザ上で再生するには大きすぎてしまいます。モバイル端末ならさらに軽量化が必要です。 動画の軽量化をするにはさまざまなツールがありますが、 HandBrakeというツールがとても使いやすかったので、基本の設定方法を紹介していきます。 ※この記事は2022年3月に編集部が情報を更新しました 動画を埋め込む方法 外部リンクで埋め込む YouTubeやVimioに動画をアップロードし、それを外部リンクとして埋め込む方法があります。 YouTubeではさまざまなサイズの動画をアップロードすることができますが、標準のYouTube動画のサイズは1920×
開発環境でも使えるメタ情報チェックツール「Simple Meta Checker」を作りました ｜ Tips Note by TAM
サイトのメタ情報のチェックに悩んでいる制作者やディレクターの皆さん、こんにちは。 HTMLのタイトルやメタ情報、h1など、とても大事なんですが確認するのめんどくさいですよね？ 僕はめんどくさいです。ページ数が多かったら、それはもう大変です。 こういった情報を確認するためのツールは、探せば色々と公開されているのですが、 開発環境（IP制限やベーシック認証がかかっている領域）で使えない 今見ているページしかチェックできない 1度にチェックできる数に制限がある などの条件があるものが多く、僕としては「サイト公開前に一括で確認したい！」といったような状況が多いのですが、合うものが見つかりませんでした。 そういうわけで、自分でツールを作ってみたので、会社のブログを利用して紹介させてくださいｗ デモサイトをGitHub Pagesで作ってますので試してみてください。 https://kandai.gi
placeholder.js - Webブラウザでダミー画像を生成 MOONGIFT
Webサイトのモックアップを作っていて便利なのがダミーの画像です。多くのダミー画像提供サービスがありますが、難点としてオンラインでないと使えないという問題があります。ダミー画像サイトが落ちているために見栄えが悪くなるのも残念です。 そこで使ってみたいのがクライアントサイドでダミー画像を生成するplaceholder.jsです。 placeholder.jsの使い方 placeholder.jsを適用した例です。 <img id="img_holder" src=""/> <script type="text/javascript"> var opts = { size: '256x128', font: { style: 'oblique', }, text: 'Hello=&World' } document.getElementById('img_holder').setAttribu
こういうの欲しかった、デザイン・コーディングが捗るツールまとめ
作成：2016/09/26 Tool > 使用頻度は高くないけれど「こういうの欲しかった」と思えた、役立つWeb制作で使うツールやサービスをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 アニメーション12の基本原則デモ ディズニーによって開発されたアニメーションの１２の基本原則（12 basic principles of animation - Wikipedia）デモ。イラストやキャラクターなどを動かすときにインスピレーションを得たいときに。モーション作成やアニメーションの参考にした12種パターンのgif動画を見ることができます。 [tool] THE ILLUSION OF LIFE [参考] ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ - CSS Animation CSSで写真にフィルタ加工してコード出
カラーの取得・管理、カラーパレットの作成、画像からカラー抽出などいろいろできてしまう便利なカラーツール -Kelir
カラーピッカーはいろいろありますが、これは決定版では？ というくらい便利なOS X用の無料ツールを紹介します。 カラーピッカーとしてはもちろん、カラーの管理、カラーパレットの作成、画像からカラーの抽出、グラデーションの作成・コード生成など、PhotoshopやSketchをはじめとする他のアプリで作業する時に役立つ強力なカラーツールです。
【入門編！】Webデザインをする上で役立つツールまとめ
Webデザインを入門から学びたい人向けに便利なツールを紹介しています。Webデザインと一言で言っても、配色やフォント、バナー作成や画像のサイズなどいろいろなスキルが求められるものなので、使えるようになっておくと良いでしょう。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 Webサイトをゼロからデザインするのはなかなか大変なことです。配色やレイアウト、使用するフォントや画像など考えなければならないことがたくさんあります。 そこで今回はWeb
無料で使える！Webデザイン初心者向けの便利なツール・サイト14選 | ブログのスイッチ
Webデザインの初心者さんにおススメする便利ツール。 フォトショやイラレは高くて使えないって方でも大丈夫です！無料で使えるフリーソフトでも機能は充実しています。 本格的なWebデザイナーを目指すなら、PhotoshopやIllustratorを勉強した方がいいですが、個人サイトの運営位なら今回紹介するツールで十分対応可能です。 ロゴ・バナー・ボタン作成ツール Webデザインでよく使うと思われる、3つの素材を簡単に作れるサービスを集めてみました。どれも直感的に使う事が出るので、初心者でも簡単にカッコいいロゴや可愛いバナーが作れますよ。 決められた素材を使うので自由度は落ちますが、誰でも簡単に高クオリティなデザインが出来るは魅力的です。
Webデザインが圧倒的に捗るGoogle Chromeの拡張機能12選
みなさんはChromeの拡張機能を活用していますか？ 拡張機能を使えば面倒な作業でも効率良くこなすことができます。今回はWebデザインのときに使うと仕事が圧倒的に捗るChromeの拡張機能を紹介します。 1. FireShot ダウンロードURL：FireShot ページのキャプチャを撮影できる拡張機能です。ページ全体をキャプチャ、目に見える部分をキャプチャ、選択してキャプチャすることができます。ランディングページなど縦長のページのスクリーンショットを撮影するときに便利です。 2. PerfectPixel by WellDoneCode ダウンロードURL：PerfectPixel by WellDoneCode ページ内に任意の画像を重ねることができる拡張機能です。画像を動かしたり、透過させたり、サイズを変更したりしてレイアウトすることができます。ボタンやロゴの配置を迷っているときにコ
これでデザイナーいらず!?デザイン作成サービスがやっぱり熱い～番外編～
写真を加工できるサービス。アプリ版とウェブサービス版があります。日本語化もされており、かなりマニアックな加工までできるので高い専用ソフトに手だ出せない人におすすめです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TwitterカードやOGPなど、head内のmetaに記述するコードを簡単に生成できるオンラインサービス -Hey Meta
使用してないCSSを解析して削除、使用中のものだけ残してくれる・「UnCSS」
WebページにあるカッコいいボタンのデザインをHTML/CSSとして抽出「SnappySnippet」NOT SUPPORTED
