この記事では、2020年に公開された便利なWebオンラインツール・ベスト100個をまとめてご紹介します。 定期的にリストアップしている最新オンラインツールまとめ記事では、2020年にかけて合計306個の新しいツールやサービスが登場しました。 その中でも、特にWebデザイン制作に便利なツールを選りすぐったコレクションで、「無料で利用できるツール」を揃えています。 これらのツールやサービスを活用すれば、Webデザイン制作をより快適に進めることができるでしょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. CSSツール（14個） 2. パターンツール（7個） 3. イラスト系ツール（3個） 4. デザインツール（10個） 5. 配色カラーツール（6個） 6. グラデーションツール（3個） 7. SVGツール（8個） 8. スクリーンショ

【WP】自前のCSVインポート処理の決定版。大量データや多数のカスタムフィールドにも対応。 更新日：2019/10/07 WordPressにCSVデータをインポートするために様々なプラグインがありますが、要件に応じた柔軟な対応は難しいものがあります。 例えば、「社内で管理している商品番号をキーにしたい」や「基幹システムから出力したCSVを毎日自動で取り込みたい」や「管理画面から『上書き禁止』設定をしたものはCSVインポートで上書かない」などなど。 こういう要件に関してはプラグインをカスタマイズをするよりも、自前でのCSVインポート処理を作ってしまうのが良いと思います。 そんなに難しくありませんし、とても柔軟に作ることが出来ます。 この記事では以下の流れで解説します。 CSVファイルのアップロード処理インポート処理用のPHP作成大量のデータや処理でメモリが足りなくなるケース対応非同期処理で

<p><ruby>吾輩<rt>わがはい</rt></ruby>は猫である。名前はまだ無い。</p> <p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番<ruby>獰悪<rt>どうあく</rt></ruby>な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</p> すると、こうなる。 ルビが入ることで行間が変化して、いまいち格好悪い。そして一部のブラウザ（Chromeなど）ではルビの位置をCSS微調整することができず、使いにくい。 別の方法を考える そこで、<ruby>タグを使わないで以下のようにHTMLを組んでみる。 <p><span data-ruby="わがはい">吾輩</span>は猫である。名前はまだ無い

リンクを別タブで開くためにHTML上でリンクにtarget="_blank"を指定することには「セキュリティとパフォーマンスの点で問題がある」と、グーグルのエンジニアが注意している。 一般的な書き方だと思うのだが、どういうことなのだろうか。何が問題なのか、どうすればいいのかを、わかりやすく解説する。 ほかにも今回は、SEOコンサルタントを採用するときのポイント、グーグル検索に有利なCMS、AMPストーリーのSEOなどなど、幅広い観点からSEOの理解を深められる情報をまとめてお届けする。 SEOコンサルタント採用時のグーグル流ベストプラクティスグーグル検索ではShopifyが優遇されている！? CMSで違いはあるのか？AMPストーリーに特化したSEOをグーグルが解説グーグル検索でニュース記事を目立たせるコツをグーグルが解説グーグルは、GAやChromeのデータを検索に使っていないグーグルSE

2020.07.07 Tue 動画ソフトVideoProcレビュー。メリット・デメリット・無料でできる範囲

ページに埋め込んだYouTubeをJavaScriptで制御する機会が何度かあったので、 YouTube Player API の使い方をまとめてみます。 今回使用するのは、以下のIFrame API になります。 iframe 組み込みの YouTube Player API リファレンス - YouTube - Google Developers ■目次 基本的な埋め込み JavaScriptでの操作 プレーヤーの状態に応じて処理をする プレーヤーの準備ができてからJavaScriptでの操作を行う パラメータを設定する 基本的な埋め込み まずはYouTubeプレーヤーをページに埋め込んでみます。 1.YouTubeを埋め込む場所を指定 ■HTML <div id="sample"></div> ※id="sample"内にYouTube(iframe)が埋め込まれるのではなく、#sa

それWebでできるよ！ こんにちは皆さん スマホのカメラを使って写真を撮ると、なんと文字列が返ってくる。 そんなアプリがあるような気がするのですが、現在ではブラウザでもカメラにアクセスできるので、わざわざアプリにする必要もなく ( OSの差異にあまり煩わされることなく ) Webアプリで簡単に作ることができるのではなかろうか、と考えました。 考えたらやるしか無いでしょう。 休日を利用して、ちゃっちゃか作ってみました。 あ、いつものようにPHP使いますね TL;DR 今回の見所は以下のとおりです。 HTML + JavaScriptでカメラを取る tesseract-ocrをインストールしたコンテナを作る PHPでOCRする 何がやりたいのか 掲示板とかで無線wifiのssidとか貼ってあるとき、いちいち手打ちするの面倒なんで、カメラで取ってそのままはっつけられるようになったら嬉しいのになぁ

その1. そもそもアイデアが思い浮かばない 遭遇確率　：★★★★☆ どんな壁？：いざWebサービスを作ろうとしても何もアイデアが思い浮かばない 解決策：身近な課題をひたすら探す サービスを作る上では何かを解決する系のアイデアであり、かつ自分が当事者であるとモチベーションも続きやすいです。 自分が普段ネットを使っていて不便だと思うこと、今使っているサービスの不満点、などなんでも良いのでとりあえず書き出してみましょう。 大体この中に自分の技術力でも解決できるような課題が存在します。 もし自分の中での課題が見つからないという場合は、日々Twitterのタイムラインで流れてくる身近な人が抱えている課題をピックアップしてアイデア化するのもありです。 回避策：しょぼいアイデアでも日々書き残していく いざサービスを作るというときにアイデアも出ないし身近な課題すら見つからない場合は、普段からアイデアを無理

SEO対策とは？　10年・20年と長期的に企業ホームページで集客できる基本を、初心者にもわかりやすく解説！ TOP ＞ SEO（検索エンジン最適化） ＞ SEO対策とは？　10年・20年と長期的に企業ホームページで集客できる基本を、初心者にもわかりやすく解説！ 「SEO対策って、結局何をすればいいのかわからない」「SEO対策は専門用語や最新情報を常に勉強しないといけないから、大変だ」「検索順位が思うように上がらず、企業ホームページで集客できていない」

LINE＠は、ビジネス向けのLINEアカウントです。 ユーザーに向けて一斉にメッセージやLINE限定のクーポンを送信でき、2017年４月現在では21万店舗に登録されています。特に飲食店、美容室、エステなどの店舗系ビジネスの企業ではLINE＠の活用が効果的です。 本記事では、LINE＠とはそもそも何かという基本から、成功事例やアカウントの開設方法まで解説するので、店舗系のビジネスを展開している方は、ぜひ参考にしてみてください。 ※注意：「LINE＠」は2019年4月に統合され「LINE公式アカウント」に名称が変わっています。最新情報は以下の記事にて解説しています。 使い方の概要：5分で分かるLINE公式アカウントの使い方。必ず使いたい3つの機能とは？料金プラン：2020年最新LINE公式アカウントの料金プラン攻略。コスパよく効果を出す技と無料活用術始め方・作り方：【2020年8月最新版】LI

University College London (UCL)、早稲田大学大学院理工学研究科卒業。 ウェブアナリストとしてリクルート、サイバーエージェント、アマゾンジャパン等で勤務後、独立。 ウェブサイトのKPI設計、分析、改善を得意とする。全国各地での講演は500回を突破。 著書に『現場のプロがやさしく書いたWebサイトの分析・改善の教科書』など。

Instagramに複数リンクを貼れるツール「Linktree」ってなに？ 「linktree」とはインスタグラムのプロフィールに、1つ以上のリンクを入れられるウェブツールです。 「linktree」（リンクツリー）は、無料ウェブツールでインスタグラムのアカウントで登録することで、プロフィール用のリンクを作成できちゃう優れものです。 インスタのプロフィールに、「linktree」のリンクを入れておくだけで、それをクリックした人は、指定したリンク先を見てもらえるっていうわけです。 しかも無料プランでこんな機能モリモリなんで、正直有料にしなくても当分は大丈夫ですね。 「linktree」の登録方法 まずは「linktree」のトップページの「Sign up with Instagram」ボタンをクリックして、インスタグラムアカウントを通じて新規登録をします。 このような画面が表示されるので、「

現在、一部地域のApp Store、Google Play限定で公開中です。 LINEスタンプメーカーとは？ POINT 01スマートフォンからLINEスタンプが 簡単につくれます。 スキャナや画像編集ソフトは不要です。無料でスタンプがつくれます。 POINT 02撮った写真を加工してスタンプに。 LINEスタンプメーカーで描いたイラストも 簡単にスタンプにできます。 写真を切り取るのだって簡単。 テキストやイラストで伝えたいメッセージをつけよう。 POINT 03スタンプの審査申請や販売も スマートフォンから対応できます。 つくったスタンプを友だちとシェアしたり、LINE STOREやLINEアプリ内のスタンプショップで販売したりしよう。 LINE STORE/ショップに掲載したくない人は、プライベート設定で非公開にしてね。 POINT 04販売するスタンプは 売上分配額の有無を選択でき

日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイトです。

どうもご無沙汰しておりますせんざきです。 最近、デザインを見る訓練をすごく重視してやっています。 このテーマは、タイトルだけ書いておいて、まだ書く時じゃないなあと思いながら温めていたものです。 正直まだ、書く時じゃないなあという感じもするのですが、どういうことなのか言語化できそうな段階まで来たので、メモがわりに書き起こしていこうと思います。 はじめにまず、「デザインを見る訓練ってなんやねん」っていう話をします。 本当にここ数ヶ月、デザイナーにとっての見る力の大切さを日々感じているんです。 このツイートは、見る力について書いていて、結構反響があったものです。 原研哉さんが運営してる低空飛行っていうサイトがあるんですけど、ここの写真や映像、iPhoneで撮ってるらしい、、 目が良ければiPhoneでもこんなに綺麗に撮れるんだなあhttps://t.co/S7WBO3JSG8 pic.twitt

現在のところ、margin-top, padding-bottomのように物理プロパティをボックスモデルで使用していると思います。しばらくはそのままで問題ないですが、CSS GridやFlexboxで使われている論理プロパティを使用する機会が増えるでしょう。 CSSの論理プロパティにおける考え方、注意点、そして英語や日本語など言語で変化する使い方について紹介します。 New CSS Logical Properties! by Elad Shechter 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 訳者注: 記事内の日本語サイトとは横書きではなく、縦書きが想定されています。 はじめに CSSの論理プロパティにおける考え方 新しいボックスモデルのプロパティ 論理ディメンション 言語に応じた配置の適用 ブラウザのサポート 論理プ

LINEスタンプを自分で作成して、申請・販売した時の体験談をまとめてみました。 この記事を最初に公開したのはLINEスタンプが開始された年（2014年）だったんですが、当時は応募が殺到していて、審査にすごく時間がかかったところがものすごく待ち遠しかったです。2019年現在は審査もだいぶ早くなって、アニメーションスタンプや絵文字・着せ替えなど作れるものも増えてきました。 実際にLINEスタンプを作成して販売に至るまでの流れを書いたので、これからLINEスタンプ作るよって人はぜひ参考にしてみてください！ LINEスタンプ制作開始まで LINEスタンプが個人でも作れる！という情報は事前に知っていましたが、個人で作ったものがほんとに売れるのかな？という気持ちがあったので、まったく手を付けていませんでした。実際に発売されてから、ちらほらと制作者のブログ記事を見かけましたが予想以上の売り上げがあったよ

こんにちは! タダケン(@tadaken3)です。 Macユーザーのあなたに業務効率化のテクニックをお伝えします。Mac OSはYosemite以降であれば、なんとjavascriptでMacの自動操作ができるんです。通称JXA(javascriprt for Automition)といいます。今回はJavascriptでMacを操作するJXAをご紹介します。JXAは簡単なMacアプリも作れてしまいます。 JXAで何ができるの？ JXAでアプリを作ってみよう ファイルをドラッグ&ドロップすると定型メールを作成するアプリを作ろう まとめ 今回の記事はいかがでしたか？ JXAで何ができるの？ 具体的にJXAでどんなことができるのでしょうか。例えば以下の様なことができます。 MailやiTunesなどMac標準のアプリを操作 ファイルやFinderの操作やMac自体の設定変更 Evernoteや