びっくりするほど簡単！HTMLやCSSの作業なしで、Bootstrap 4のさまざまなページを作成できる無料ツール
さくっと短時間で、慣れれば1分！ デスクトップやスマホに対応したページを作成したい時にぴったりな無料のオンラインツールを紹介します。 HTMLやCSSの作業は一切不要で、Bootstrap 4ベースのさまざまなページをドラッグ&ドロップで積み木のように組み合わせて簡単に作成できます。 Froala Design Blocks Froala Design Blocks -GitHub Froala Design Blocksでは170種類以上のレスポンシブ対応のコンポーネントが用意されており、それらを好きなように組み合わせて、誰でも簡単にWebページを作成することができます。 作成したページは個人でも商用でも無料。詳しくはライセンスページをご覧ください。 短時間で、Bootstrap 4ベースのページを作成してみる 用意されているコンポーネント 短時間で、Bootstrap 4ベースのページ
ウェブデザイナー必見！美しいCSSグラデーションをコピペできる無料ツール17選まとめ
デザインでもっとも頭を悩ますことの多い「配色えらび」。配色を決まらずに、時間だけが過ぎてしまったという経験のあるひとも多いでしょう。 そんなときは、無料で使えるオンラインツールを利用してみましょう。今回は、グラデーションカラーに特化し、CSSコードも手軽にコピペできるツール17個をまとめてご紹介します。2018年のデザイントレンドをうまく反映したカラーリングだけでなく、お好みのグラデーションカラーも手軽に作成することができ、ウェブデザイン制作の時間短縮につながります。 ウェブデザイナー必見！美しいCSSグラデーションをコピペできる無料ツールまとめ Grabient ウェブサイトやグラフィックデザインに利用したくなる美しいグラデーションカラーを現在25種類揃え、お好みで色をカスタマイズ、作成できる無料の配色作成ツールです。 ボタンをクリックするだけで、Internet Explorer や
非デザイナーがナメられないための、おすすめデザインツール12選
僕は非デザイナーですが、こちらの考えにとっても共感します。 ブログにしても、アプリにしても、イベントにしても、良いコンテンツは世の中にもういっぱい溢れていて。 本気度を示し、他ではなく私たちのコンテンツを選んでもらうために、デザインにこだわるって大事だなって考えています。 おしゃれなものを作らなければいけない、と言うわけではないと思います。 使ってもらいたい・届けたい人たちに寄り添い、作りたい世界観を伝えるためのデザインにすること。 相手視点を持った思考が大事なんじゃないかなって思います。 『わかる！だけど実際難しいんだよ！』 という非デザイナーの方々に向けて、同じく非デザイナーの僕がお気に入り登録して愛用しているツールをシェアします。 有名どころも多いですが、もしご存知ないものもあったら触ってみてください。
Free Gradients Collection by itmeo.com
Free for commercial or personal use by Dima Braven. WebGradients is a free collection of 180 linear gradients that you can use as content backdrops in any part of your website. Easy copy CSS3 crossbrowser code and use it in a moment! We've also prepared a .PNG version of each gradient. As a bonus, there are packs for Sketch & Photoshop.
ライバルサイトの分析に最強なSEOツール「SEO Rival Checker」開発しました！！ - ITWeber
どうもIT大好きFwwwです。 久しぶりにはてなで記事を書かせていただきます。 今回はMacBookチルドレン仲間のたくちゃむ君（@saimedhi）とライバルサイトの分析に利用できる最強なSEOツール「SEO Rival Checker」を開発しましたよ！！ ※PC推奨です。 SEO Rival Checkerってなに？？ SEO Rival Checkerはその名の通りライバルサイトの分析に利用できるSEOツールです。 当初はWordpressのプラグインという形で配布しようと考えていたのですが、多くの方に利用していただきたいためにウェブサービスとしてリリースいたしました。 このSEO Rival Checkerではキーワードから検索順位１位から10位（または１位から20位）のサイトを分析することができます。 出力する情報は、 タイトル URL ディスクリプション H1 H2 H3 H
プレビューで簡単！CSSアニメーションがブラウザ上で作れる「animista」
Webデザインを彩るCSSアニメーション。実装時にはデザインのイメージに合わせて、細かな調整を加えたり、なかなかに手間がかかる箇所でもあります。そんな手間がかかる調整工程を省ける、ブラウザ上でアニメーションが作れるツール「animista」を今回は紹介したいと思います。 ブラウザ上でプレビューしながら細かな動きを調整して、タグをコピペするだけでCSSアニメーションが実装できる便利なツールです。 詳しくは以下 拡大や縮小、スウィングなどの18種類ものアニメーションの雛形から、オプションで数値を変更してアニメーションを細かにカスタマイズすることができます。オプションではアニメーションのスピードだけでなく、ディレイや回転回数など、細かな場所まで弄ることが可能。面倒だった細かな調整作業を、ブラウザ上でプレビューを見ながらできるので、効率的に仕事をこなすことができます。スムーズなアニメーション実装で
これ知ってる？WEBの人なら押さえておきたいツール＆サービス50選 - 死ぬまでWEB屋
公開前に知人に見せたら、読むのに20分もかかったわ！！ と、お叱りを受けましたｗ オススメのツールやWEBサービスということで50ほど紹介していますが、僕の使用感のほかに、ところどころ経験談的なものが入っています。そのあたり、読むのがめんどうな方は読み飛ばしていただければ幸いです。 2万文字近くあるので、お時間ある際にゆるりと読んでいただければと思います。 それではお楽しみ下さい！ サイト解析に使えるツール・サービス import.io Juicer Ptengine GTmetrix CLOUD FLARE wayback timemachine シミラーウェブ Open Site Explorer サクラサクLABO aguse Built with ディレクションに使えるツール・サービス ウェブチェッカー Cat Mdes maindmaister ひとりブレスト 関連キーワード取得
Web制作者は絶対チェックしておきたい、デザインやコーディングに取り入れていきたい便利なツールのまとめ
Webサイトのデザインやコーディングは、やるべきタスクが年々増えてきました。それらの手間がかかる面倒な事が楽にできるツールやアプリも年々リリースされています。 これからのWeb制作にどんどん取り入れていきたいツールやアプリを紹介します。 Adobe Experience Design(Adobe XD) Adobe XDはWebサイトやスマホアプリのデザインやプロトタイプを作成するベクターベースのツールで、PhotoshopやIllustratorともスムーズに連携して利用することができます。 以前は「Project Comet」の名称で発表されていた新ツールが、2016年3月に「Adobe Experience Design(Adobe XD)」としてプレビュー版が公開されました。現在はOS X版のみですが、2016年後半にはWindows 10への対応も予定されています。
簡単にきれいな配色デザインが作れる無料ツール「ColorHexa」 | WordPressやWebデザインなど紹介 Ocadweb
前回、WEB上で画像やテキストなどのカラーを識別できるGoogle Chromeの機能を紹介しましたが、今回は色を識別してから、 色彩センスがないけど、きれいな配色が作りたい！！ この色には何色と合うんだろう？ とお困りではないですか。 【色を識別する記事】これ何色？画像やテキストなどWEB上の色を簡単に識別するGoogleChromeの機能 今回は、どんな色か特定できてもその色がどんなものなのか、相性の良い色はどの色なのか、配色を検討する参考にできる無料のオンラインツールを紹介します。 紹介する記事の中でこのサイトのロゴなどのテーマカラー「#d86e3a」をもとに紹介します。 簡単にきれいな配色デザインが作れるColorHexaって？ 前述していますが、「どんな色か特定できてもその色がどんなものなのか」、「相性の良い色はどの色なのか」、配色を検討する際に参考にできる無料のツールで、色彩セ
2015年グッドデザイン賞からWebサービス12選・アプリ16選
2015年9月29日、2015年のグッドデザイン賞が発表されました。 今年は審査対象数が3,658件、受賞件数が1,337件(受賞企業数909社)という結果でした。 今回はその中から、国内企業が提供しているWebサービスとアプリケーションの受賞内容を紹介します。 これからWebサービスやアプリケーションの企画開発を考えている方は、ぜひ参考にしてみてください。 利用料金等に関しては、執筆時(2015年9月30日)時点の情報です。 グッドデザイン賞とは グッドデザイン賞とは、1957年に創設された、日本で唯一の総合的なデザインの評価や推奨の制度です。 公益財団法人日本デザイン振興会が主催しています。 「よいデザイン」を選び、推奨することで社会生活をより豊かなものにしていくことを目的としています。 あらゆる領域を対象としていて、受賞数は毎年約1200件にものぼります。 グッドデザイン賞を受賞した
お手軽に画像加工・編集出来るフリーソフト26選
画像加工でおなじみのソフトといえば、Photoshopを（フォトショップ）です。しかし、Photoshopは高額な上、使いこなすには専門的な知識が必要となり、初心者には扱いづらいソフトだと言えるでしょう。 そこで活用したいのは、無料で配布されている写真・画像の無料加工ソフト。無料と言っても高機能なものが多い上、初心者でも扱いやすいものが揃っています。 今回は、無料で手軽に画像が加工できるサービスをまとめて紹介します。写真に文字入れが必要な時やコラージュをしたい時におすすめです。ぜひ活用してみてください。 無料の写真・画像加工ソフトでできること まず、写真や画像の加工ソフトでできることを確認しておきましょう。以下の機能は、ほとんどの加工ソフトに備わっています。 写真や画像に文字入れをする 写真や画像のトリミングをする 写真や画像のサイズを変更する 以下のような機能が備わっている加工ソフトもあ
ブラウザ上から簡単に画像のリサイズができるbulkresizephotosは本気でオススメ！
画像のリサイズをする際、「Photoshopだと使い慣れてないので逆に手間になる」であったり、フリーの画像編集ソフトだと「使いやすいソフトを探すまでが大変」と煩わしく感じることがあります。 Photoshopを使い慣れた方であれば、バッチ処理（自動処理）で、効率化することもできますが、それすらも面倒と思う方にオススメのリサイズツール「bulkresizephotos」です。 ブラウザ上で動く「bulkresizephotos」は、イメージファイルをドラッグ＆ドロップで読み込ませ、リサイズ後のサイズを入力するだけで、画像ファイルが取得できる便利なツールです。 今回は、「bulkresizephotos」の使用方法を解説します。 bulkresizephotosの使い方 リサイズしたい画像を読み込む こちらの『Drag&Drop Images Here!』という点線の箇所にリサイズしたい画像フ
【2018年版】ブログ作成でおすすめできる人気の無料サービスを22個比較｜ferret [フェレット]
Twitter、FacebookといったSNSが登場し、以前よりブログを更新しなくなった、あるいはブログをやめてしまったという方も多いのではないでしょうか。しかし、ブログはSNSと違い長文で投稿ができる、検索エンジンでヒットしやすいという利点があります。中にはSNSと合わせて使いやすいものも多数存在します。 今回は数あるブログサービスの中でも、オススメの18サービスに絞ってそれぞれの特徴を紹介します。 目次 ブログ作成サービスを使うメリット ブログサービス比較表 ブログサービス一覧 ブログサービスを比較するポイント 無料ブログvsWordPress ▼本格的にコンテンツマーケティングを始める方は必読 コンテンツマーケティングで加速するSEO集客ガイド テレワークが主流となりつつある今、Web集客を強化するために求められるのがコンテンツマーケティングです。本書はSEO集客につなげるための、コ
![【2018年版】ブログ作成でおすすめできる人気の無料サービスを22個比較｜ferret [フェレット]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a3badeb39262bbe5bdb805b6a8a7e25455f9ef30/height=288;version=1;width=512/https%3A%2F%2Fferret.akamaized.net%2Fuploads%2Farticle%2F1301%2Fog_image%2Fdefault-3ded37ba1db2a0be938d4a15ee76a35b.png)
【2024 年最新版】ブログ運営におすすめの便利ツール・Web サービス - Naifix
WordPress でブログを運営する場合、レンタルサーバーが必要です。 個人ブログであれば月額 300 円ほどの格安サーバーでも問題ありませんが、表示速度や安全性を考えると月額 1,000 円前後のサーバーがおすすめ。なかでも「エックスサーバー」は安定度が高く、サポート体制も充実していてイチオシです。 Cocoon WordPress には様々なテーマがあり、デザインだけではなく機能面も強化できます。 日本語対応の無料テーマで群を抜いているのは「Cocoon」で、前述のエックスサーバーではファイルをダウンロードしなくても簡単にインストール可能です。 有料テーマを使ったほうが検索で有利になる、ということはないので、初期費用をおさえたいなら Cocoon を使いましょう。 TeraPad WordPress の各ファイルを編集（カスタマイズ）するには、テキストエディタが必要です。 管理画面か
専門知識不要で瞬時にWebサイトのクオリティチェックができるツール7選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 非エンジニアの皆さんに朗報です。本日はWebサイトのクオリティチェックに関するすごいツールをたくさん紹介します（どーん）。 Web制作に関わるディレクターや担当者は、ソースコード自体は書かなくとも、イメージ通りのものができているかのどうかの確認はされていると思います。 しかし、パフォーマンス、SEO対策、ソースコードの整合性などの裏側までが「ちゃんとできているのか」というのはわかりにくいですよね。エンジニアに「いや、完璧ですけどこれ？」ってどや顔されたら頷くしかないと思います。 そこで今回は、知識がなくともその辺りのクオリティチェックが簡単にできるツールを紹介します！ これらを使えば、ざっくり「完璧」「まあまあ」「ヤバい」くらいの判断ができるので、作業者にツールの結果画面を見せて「なんとかして！」と伝
エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)
STEP1. エクセルとかからCSV (TSV)をコピーしてを貼り付け STEP2. オプションを選択して変換 細かい設定 列目までをTHEADとする。(0でTHEADなし) TBODYの行目までをTHとする。 TBODY THに深度を埋め込んだクラス名を追加する。(1〜) クラス名： " + n" ひとつめのTHに深度クラスを追加しない。(lv1を追加しない) n列ごとにTRにクラス名を追加する。(0〜) クラス名： 列数 ： クラス名に列数を追加する。(nrow0, nrow1,,)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
こういうのを待ってた！日本語フォントで、レスポンシブ用の文字の指定を調整できる無料ツール -Archetype
https://bulkresizephotos.com/
http://singlepage.guru/
アクセスアラーム - メールとチャットで通知するアクセス解析
