「もし私が顧客に何がほしいかを聞いていたら、彼らは『もっと速い馬がほしい』と答えただろう」という自動車王フォードの名言があります。またユーザー中心のはずのUXデザインで「顧客の声を聞かない」「ユーザーは本当に欲しいものを言葉にできない」という言葉を聞くことがあります。どうすればよいのでしょうか。欲しいものを訊くのではなく、行動の目的を訊くことで、ユーザーの本当のニーズにたどりつくことができます。Read less
「もし私が顧客に何がほしいかを聞いていたら、彼らは『もっと速い馬がほしい』と答えただろう」という自動車王フォードの名言があります。またユーザー中心のはずのUXデザインで「顧客の声を聞かない」「ユーザーは本当に欲しいものを言葉にできない」という言葉を聞くことがあります。どうすればよいのでしょうか。欲しいものを訊くのではなく、行動の目的を訊くことで、ユーザーの本当のニーズにたどりつくことができます。Read less
どうも、まさとらん（@0310lan）です！ 今回は、JavaScriptを使ってとにかく遊んだり楽しんだりできるインタラクティブなWebサービスやツールを厳選してご紹介します。 ゲーム体験をしたり、アート作品を作ったり、JavaScriptで開発されたユニークなサービスを利用してじっくりと遊んでみましょう。 Webの楽しい世界にご興味ある方は、ぜひ参考にしてください！ ■リアルタイムにコードを書いて戦うオンライン対戦ゲーム 【yare.io】 世界中のプレイヤーと1対1で戦うゲームなのですが、その戦い方はJavaScriptのコードをリアルタイムに書き換えながら自機を操作するというのが大きな特徴です。 見た目は簡素なシューティングゲームですが、実はかなり奥深いストラテジーゲームみたいな要素が詰まっています。 ゲームの大まかな流れとしては、以下のとおりです。 JavaScriptで自機を制
どうも、まさとらん（@0310lan）です！ 今回は、フロントエンド開発者およびこれから学習をしようと考えている人に最適な無料リソースを厳選してご紹介します。 学習コンテンツばかりでなく、開発に便利なサービスやツールなども紹介しつつ、初心者から中級者くらいまで役に立つドキュメントもまとめています。すべて無料なのでWeb開発にご興味ある方はぜひ参考にしてみてください！ ■何を学習したらいいのかをロードマップで確認する 【 Developer Roadmaps 】 フロントエンドの学習といっても意外に広範囲なので、まずは何から勉強をすればいいのか迷う人も少なくありません。この「Developer Roadmaps」はWeb開発者が勉強するための学習内容をロードマップとして無償公開しています。 さまざまな種類が用意されていますが、例えばフロントエンドの場合は以下のような感じです。 有名なロードマ
どうも、まさとらん（@0310lan）です！ 今回は、Web開発などで役に立つ厳選した無料サービスをご紹介します！ 特にWeb開発に慣れていない初心者や非エンジニアの方でも、手軽に特定の機能を提供するページを構築できるサービスを厳選してみました。 また、複数人でのレビュー、サイトの分析、学習リソースなども合わせて掲載しているので、ご興味ある方はぜひ参考にしてください！ ■独自ロードマップを公開してユーザーと共有する！ 【 Roadmap Show 】 Webアプリやサービス自体のアップデートや予定している機能追加などの情報を、プロダクトロードマップとして手軽に一般公開できる便利なサービスです。 サービス側が何をやっていて、どのような改善をしているのかをユーザー側からも分かりやすくなります。 基本的な使い方も簡単で、いくつかのカテゴリ別にタスクカードを追加していくだけです。 これから予定して
どうも、まさとらん（@0310lan）です！ 今回は、さまざまなWebサービスやデータベースと連携して、独自のWebアプリなどを手軽に開発できるサービスをご紹介します！ データソースの連携や画面デザインなどはドラッグ＆ドロップの操作で簡単に構築が可能で、ロジックやイベント処理などもわずかなJavaScriptを利用するだけで開発できるのが特徴です。 オープンソースで開発が進められており、セルフホストすることで大きな制限もなく活用できるのでご興味ある方はぜひ参考にしてください。 【 ToolJet 】 ■「ToolJet」の使い方 それでは、「ToolJet」をどのように使えばいいのか詳しく見ていきましょう！ まずはメールアドレスを入力したら【Create an account】ボタンをクリックして無料のユーザー登録を済ませておきます。 メールアドレス宛にユーザー登録用のリンクが送付されるの
どうも、まさとらん（@0310lan）です！ 今回は、万能なドキュメントサービスとして人気の「Notion」を、さらにパワーアップさせて別の用途に活用できるWebサービスを厳選してご紹介します！ すべて無料で利用できる（もしくは無料プランありの）サービスであり、機能的に優れていて誰でも扱える簡単な操作のものを厳選しました。 現状のNotionだけでは足りない機能を多く搭載できるサービスばかりなので、ご興味ある方はぜひ参考にしてみてください！ ちなみに、Notionについてまだよく知らないという方は以下の記事で詳細を解説しているので合わせて確認しておくことをオススメします。 paiza.hatenablog.com ■Notionをメルマガ配信システムに変えるサービス！ 【 NoCodeLetters 】 Notionで作成したテーブルをメルマガ（ニュースレター）のコンテンツ管理用データベー
どうも、まさとらん（@0310lan）です！ 今回は、ごく普通のNotionドキュメントで構築された完全無料のWebサイトビルダーをご紹介します。 必要なものはNotionアカウントのみ！ 多彩なコンポーネントをドラッグ＆ドロップするだけで、誰でも簡単に美しいWebサイトを構築できるのが特徴で、フルカスタマイズ可能なノーコードサービスのように使うことができます。 Webサイトを手軽に構築したい方も含めて、ぜひ参考にしてみてください！ 【 The Super Builder 】 Notionをまだ使ったことがない人は、以下の記事を参考にしながら新規アカウントを作成しておきましょう。 paiza.hatenablog.com ■「The Super Builder」の使い方 それでは、「The Super Builder」をどのように使えばいいのか詳しく見ていきましょう！ 利用するにあたり、ユ
どうも、まさとらん（@0310lan）です！ 今回は、誰でも無料で使える天気予報APIを提供してくれるWebサービスをご紹介します！ 面倒なユーザー登録やAPIキーの設定などが不要で、欲しい天気情報のパラメータを含めたURLを好きなように構成するだけで簡単にJavaScriptから制御できるのが特徴です。 日本はもちろん、世界中の詳細な天気情報を取得できるのでご興味ある方はぜひ参考にしてみてください！ 【 Open-Meteo 】 ■「Open-Meteo」の使い方 それでは、「Open-Meteo」をどのように使えばいいのか詳しく見ていきましょう！ 「Open-Meteo」が提供する天気予報APIを利用するにあたり、何か特別な登録や申請は必要ありません。もっと言えば、ユーザー登録も不要でAPIキーもありません。 非営利プロジェクトであれば誰でも自由に使うことが可能で、以下のエンドポイント
どうも、まさとらん（@0310lan）です！ 今回は、ブラウザ上で電子回路を組み立てたりプログラミングしたりできる無料のWebサービスをご紹介します。 Arduino、Raspberry Pi Pico、ESP32などのボードを使い、さまざまな電子部品を組み合わせて自由に回路を設計して動作確認もできる便利なWebエディタを提供しています。 ブラウザさえあればいつでも手軽に試せるので、ご興味ある方はぜひ参考にしてください！ 【 Wokwi 】 ■「Wokwi」の使い方！ それでは、「Wokwi」をどのように使えばいいのか詳しく見ていきましょう！ 利用するだけならログインは不要です。まずは、サンプルのプロジェクトを試しに使ってみましょう。 サイトのトップページにはサンプル例がいくつか表示されているので、好きなものを1つ選んでみます。今回は「Arduino LCD 16x02」を選択してみました
どうも、まさとらん（@0310lan）です！ 今回は、Webサイトの構造を可視化して直感的に理解しやすい「ビジュアルサイトマップ」を作成できるWebサービスをご紹介します。 ブラウザからGUIベースのエディタにアクセスするだけで誰でも利用可能で、すべてマウス操作でできるので初心者でも簡単に使いこなせます。ブロックを追加していくだけでサイトマップに簡易的なワイヤーフレームが挿入できる点がとても便利です。 また、既存のWebサイトから素早くサイトマップに変換する方法も合わせて解説しているので、ご興味のある方はぜひ参考にしてみてください！ 【 Octopus.do 】 ■「Octopus.do」の使い方 それでは、「Octopus.do」をどのように使うのか詳しく見ていきましょう！ トップページにアクセスしたら【Create sitemap】ボタンをクリックします。 すると「サイトマップエディタ
どうも、まさとらん（@0310lan）です！ 今回はブラウザ上でWebデザインやプロトタイプを作成できる「Figma」をパワーアップしてくれる、厳選された拡張機能をまとめてご紹介します。 デザインの構築を便利にしてくれるものから、Web開発の即戦力となるプラグインやツールの枠を超えたユーティリティを提供してくれるものまで、幅広くピックアップしていますのでぜひ参考にしてみてください！ ■Figmaのデザインをコードに変換できるプラグイン 【 Figma to Code 】 Figmaで作成したWebデザインを、そのまま実際の開発に利用できるソースコードに変換してくれるプラグインが「Figma to Code」です。 2020年11月時点では、汎用性の高い「Tailwind CSS」を利用したHTMLへの書き出しに対応しており、他にもFlutterやSwiftUIのソースコードが出力可能です。
変わった生き物や珍妙な風習など、気がついたら絶えてなくなってしまっていそうなものたちを愛す。アルコールより糖分が好き。 前の記事：レジ袋としても使えるタンクトップを作る ＞ 個人サイト 海底クラブ さっそくご覧ください まずは、完成したトドを見てもらいたい。 じゃじゃん！トドです！ パカッと口を開けて、 ToDoリストをくわえさせる。 口の上下に磁石が仕込んであるから、手を離しても落ちないのだ。 ToDoリストを持たされたトドです！ まるで富士山のようなどっしりとした末広がりの安定感よ......。決めた、君の名は「トドの富士」だ！ 机の上に置いてみた。 大きい。机の上に置かれたその姿は、もはや威圧感といえるほどの存在感を放っていた。 構想段階では手のひらサイズに収めようと思っていたのだが、材料を購入する段になって「でも、大きくて邪魔であることの代名詞にされることもあるトドがコンパクトだっ
どうも、まさとらん（@0310lan）です！ 今回は、HTML要素を簡単にアニメーション化できるJavaScriptライブラリをご紹介します。 初期設定はJavaScriptで書きますが、実際のアニメーション作りに関してはタイムラインエディタを利用した直感的な操作で実現しているのが大きな特徴です。ちょっとしたインタラクションから3Dアニメーションまでカバーできるライブラリなので、ご興味ある方はぜひ参考にしてください！ 【 Theatre.js 】 ■「Theatre.js」の導入について！ それでは、「Theatre.js」をどのように使えばいいのか詳しく見ていきましょう！ 既存のWebサイトへ「Theatre.js」を導入する方法はいくつかあるのですが、今回はもっとも基本的な手段としてCDN経由でライブラリを読み込んでみます。これはHTMLファイルが1つあれば完結するので、ちょっと試して
どうも、まさとらん（@0310lan）です！ 今回は、JavaScriptで簡単にExcelのようなスプレッドシートを作成できるライブラリをご紹介します！ 基本的な操作はすべてJavaScriptから制御可能であり、自分の好きなようにカスタマイズできる強力な機能が多数提供されています。また、簡単なプログラムだけでファイルの書き出し機能が利用できるなど便利なメソッドも多く含まれています。 自作のWebアプリなどにも手軽に組み込めるので、ご興味ある方はぜひ参考にしてみてください。 なお、JavaScriptの基本はpaizaラーニングの「JavaScript入門編」で学ぶことができますので合わせてチェックしてみてください。 【 jExcel 】 ■「jExcel」の使い方 それでは、まず最初に「jExcel」の導入方法から見ていきましょう！ 全部で3通りの方法が以下のように提供されています。
どうも、まさとらん（@0310lan）です！ 今回は、多彩なドキュメントを作成できる万能サービスとして人気の「Notion」を、もっと便利に活用できるWebサービスやTipsをご紹介していきます。 Notion単体でもさまざまなことができますが、Webサービスを組み合わせることでデータの可視化やインタラクティブ要素の追加など多彩なことが実現できるので、まさに無限の可能性を手に入れられると言っても過言ではありません。 「Notion」を利用中の人もそうでない方も含めて、ドキュメントサービスにご興味ある方はぜひ参考にしてみてください！ ■「Notion」とは まず最初に「Notion」をまだ使ったことがない人に向けて、どのようなサービスなのか概要を少し解説しておきます。 【 Notion 】 「Notion」はノートやメモなどのドキュメントを作成したり、タスク管理やWikiのようなページを作れ
どうも、まさとらん（@0310lan）です！ 今回は、Webサイトやブログなどで有効活用できる無料のイラスト画像を提供するサービスを厳選してご紹介します。 いずれも個人利用はもちろん、商用利用もOKなイラスト画像ばかりなうえ、ユーザー登録も不要なので手軽にダウンロードして使うことができます。 Webサイトに効果的なアクセントを追加したい人も含めて、ぜひ参考にしてみてください！ 【 Open Doodles 】 印象的なデザインのイラスト画像を無料で提供しているのが「Open Doodles」です。 PNG / SVG形式の画像ファイルをダウンロード可能で、さまざまな用途のWebサイトやブログなどで有効活用できるものばかりです。 たとえば、Webサイトの単純なテキストであっても、以下のように画像を配置するだけで効果的なアクセントになるわけです。 また、ジェネレーター機能も提供されており、自分
どうも、まさとらん（@0310lan）です！ 今回は、人気のグラフィックデザインツール「Canva」に搭載されている多彩な機能のうち、Web開発者に役立つ機能を厳選してご紹介します。 「Canva」は、アイキャッチ画像やバナー広告・ポスターを作成するなど、さまざまな画像編集やデザインを作成できるのですが、実はそれ以外にも驚きの使い方ができる多くの機能が搭載されています。 新しい「Canva」の使い方を知りたい方も含めて、ぜひWeb制作に役立ててください！ 【 Canva 】 ■Webサイトのプロトタイプを作って公開！ 「Canva」を使うと画像やテキストなどを組み合わせて、手軽にWebサイトのデザインを構築できるのをご存知でしょうか。そのうえ、ホスティングも同時にしてくれるので、簡単なプロトタイプを作ってネット上に公開できる仕組みがあります。 方法は簡単で、「Canva」の検索ボックスに「
どうも、まさとらん（@0310lan）です！ 今回は、普段から使い慣れているGoogleスプレッドシートを高品質なWebサイトに変換できるWebサービスをご紹介します！ ユーザーがやることはセルの値を変更するだけというお手軽さと、Webサイトのレイアウト構成を細かく変更したり上級者向けにJavaScriptやCSSを編集する機能も無料で提供されているのが特徴です。 手っ取り早くクオリティの高いWebサイトを作成したい人にも最適なので、ぜひ参考にしてみてください！ 【 Siteoly 】 ■「Siteoly」の使い方 それでは、「Siteoly」をどのように使えばいいのか詳しく見ていきましょう！ まずはサイトのトップページにアクセスして、画面上部にある【Login】ボタンから無料のユーザー登録をしておきます。 Googleのアイコン部分をクリックしてください。 するとアカウント選択画面が表示
どうも、まさとらん（@0310lan）です！ 今回は、親指サイズの超小型ボディにLinuxを搭載し、さらにAI開発エディタやカメラなども詰め込んだ強力なカメラモジュールをご紹介します。 手持ちのパソコンにあるUSBに挿すだけですぐに起動し、専用の開発エディタを使ってAIカメラを試したりトレーニングをしたりなどが簡単にできるのが特徴です。 さらに顔認識、オブジェクト分類、トラッキング、カラー検出…など10種類以上の機能がすぐに利用できるうえ、Jupyter Notebookでモジュールを制御できるので便利です。 AIを活用したい人やIoT開発に興味がある人も含めて、ぜひ参考にしてみてください！ ■「M5Stack UnitV2 AI カメラ」とは モニターやセンサー類などが全部入りの小型マイコンモジュール「M5Stack」シリーズで知られる中国のスタートアップ企業をご存知でしょうか。 同社が
どうも、まさとらん（@0310lan）です！ 今回は、GitHubのリポジトリをWebベースのRSSリーダーに変えることができるユニークなツールをご紹介します。 専門的な知識は一切不要で、マークダウンファイルに好きなフィードを追加していくだけですぐに自分だけのRSSリーダーを作って管理できるようになります。 すべて無料で利用可能なので、ご興味ある方はぜひ参考にしてみてください！ 【 osmos::feed 】 ■「osmos::feed」の使い方 それでは、「osmos::feed」をどのように使えばいいのか詳しく見ていきましょう！ 基本的な使い方としては、公式のリポジトリにテンプレートが公開されているので、これを自分のGitHubリポジトリとしてコピーするところから始めます。 テンプレートは以下のURLからアクセスできるようになっています。 ＜テンプレートURL＞ https://git
どうも、まさとらん（@0310lan）です！ 今回は、誰でも簡単にPWAやWebアプリをビジュアルエディタで開発できるWebサービスをご紹介します！ 「Adalo」は、最近人気が高まっているプログラミング不要のNoCodeサービスの一種ですが、なかでも直感的に操作ができて理解しやすいシンプルな設計なのが特徴です。 これまでアプリ開発を諦めていた人やオリジナルアプリの開発に興味ある方はぜひ参考にしてみてください！ 【 Adalo 】 ■「Adalo」の使い方 それでは「Adalo」の基本的な使い方から見ていきましょう！ まずはサイトにアクセスして【SIGN UP】ボタンから無料のユーザー登録を済ませておきます。 メールアドレス・パスワード・ユーザー名を入力すれば完了です。 すると開発したい種類を聞かれるので、今回は「Native Mobile App」（スマホアプリ）を選択してみましょう。
どうも、まさとらん（@0310lan）です！ 今回は、WebサイトのHTML内に1行のコードを追加するだけで、誰でもノーコードでカスタマイズができるようになるWebサービスをご紹介します！ Webサイトの要素を直接クリックしてそのまま編集ができるようになるので、誰でも簡単にカスタマイズができるうえ、好きな要素を追加してまったく異なるページを作成してしまうことも可能です。 Webサイトのカスタマイズやノーコード開発にご興味ある方は、ぜひ参考にしてみてください！ 【 Scepter 】 ■「Scepter」の使い方 それでは、「Scepter」をどのように使えばいいのか詳しく見ていきましょう！ まず最初にトップページ上部にある【Sign up for Free】ボタンをクリックして無料のユーザー登録を済ませておきます。 ユーザー名・メールアドレス・パスワードを入力すれば登録完了です！ 次に「S
どうも、まさとらん（@0310lan）です！ 今回は、ごく普通の静的なWebサイトにユーザー認証機能を手軽に組み込める無料のサービスをご紹介します。 特に難しいプログラミングは必要なく、単純なHTMLの属性を付与するだけで誰でも簡単に高度な認証機能を実装できるのが大きな特徴です。 また、ログインユーザー向けのコンテンツを作成したり、自動的に画面を遷移させるなど便利な機能もたくさん盛り込まれています。HTMLの基本的な知識があれば誰でも活用できるので、Web開発にご興味ある方も含めてぜひ参考にしてみてください！ なお、paizaラーニングでは、動画で学べる「HTML/CSS入門編」の講座を公開していますので、まずHTMLの基本を学びたいという方にはこちらもおすすめです。 【 Authpack 】 ■「Authpack」の使い方 それでは、「Authpack」の基本的な使い方について具体的に見
どうも、まさとらん（@0310lan）です！ 今回は、ゼロからワイヤーフレームを作って、インタラクティブに動作可能なプロトタイプ開発まで完結できる無料のWebサービスをご紹介します。 作成できるプロジェクト数やユーザー数に制限がなく、自分好みのプロトタイプを作成してそのまま公開・シェアが可能。さらに簡単なテストもできる機能が搭載されています。 ワイヤーフレームの作成やプロトタイプ開発に興味ある人はぜひ参考にしてみてください！ 【 Evrybo 】 ■「Evrybo」の使い方 それでは、最初に「Evrybo」をどのように使い始めたらよいのか実際に触りながら見ていきましょう！ まずはサイトにアクセスしてトップページにあるボタンをクリックします。 ユーザー登録の画面が表示されるので、メールアドレス・パスワードを入力しましょう。 登録が完了すると最初のプロジェクトを作成できる画面になります。 プロ
どうも、まさとらん（@0310lan）です！ 今回は、超ミニマムなシンプルさがウリのブログ構築ツールをご紹介します！ 面倒な依存関係は一切なく、自動生成されるファイルは編集しやすい単純なHTMLというのが大きな特徴です。静的サイトジェネレータのように機能しますが、プログラミングは不要でHTML&CSSの知識があれば誰でも使いこなすことができます。 ブログやWebサイトの構築に興味がある方は、ぜひ参考にしてください！ 【 1POST 】 ■「1POST」の使い方 それでは、「1POST」をどのように使えばいいのか詳しく見ていきましょう！ Node.jsの開発環境をお持ちであれば、以下のコマンドから「1POST」をインストールしてすぐにでもブログを始められます。 $ npm install -g 1post Node.jsの環境がない方や、ちょっと試してみたいだけ…という場合は、ログイン不要で
どうも、まさとらん（@0310lan）です！ 今回は、直感的な操作で高度なWebデザインを誰でも実現できるサービスをご紹介します。 Webサイトを構成するインタラクティブなコンテンツが豊富に用意されており、それらを組み合わせるだけで最適なWebサイトを誰でも簡単に構築できます。 また、提供されていないコンテンツや機能などは、JavaScriptで好きなように拡張できる設計になっているので無限の可能性も秘めています。Webサイトの作成にご興味ある方はぜひ参考にしてください。 【 Vev 】 ■「Vev」の使い方 それでは、「Vev」をどのように使えばいいのか詳しく見ていきましょう！ まずはトップページの黄色いボタンから無料のユーザー登録を済ませておきます。 利用可能なメールアドレスを入力してエンターキーを押してください。 すると登録したメールアドレス宛に、ログイン用のリンクが送付されるのでク
どうも、まさとらん（@0310lan）です！ 今回は、誰でも簡単に美しいオンラインドキュメントを無料で作成できるWebサービスをご紹介します！ 多彩なテンプレートやすぐに使えるコンテンツなどが搭載されているので、ちょっとしたドキュメントを作ってシェアするのに重宝します。また、カスタマイズ次第では個人サイトなどのWebページを公開する用途にも活用できるので、ご興味ある方はぜひ参考にしてください！ 【 Slick 】 ■「Slick」の使い方 それでは、「Slick」をどのように使えばいいのか詳しく見ていきましょう！ まずはサイトのトップページから【Sign up】ボタンをクリックして、無料のユーザー登録を済ませておきます。 ユーザー名、メールアドレス、パスワードを設定するだけなので簡単です。 （※GoogleやFacebookアカウントでもログイン可能） 以下のようなダッシュボード画面が表示
どうも、まさとらん（@0310lan）です！ 今回は、ブラウザ上からNode.jsやPythonをプログラミング可能なクラウドエディタを提供する無料のWebサービスをご紹介します。 サーバレスでバックエンドを開発できるうえ、シンプルなエディタから即座にエンドポイントを作って公開もできる便利なサービスとなっています。 手軽にサーバ側の処理を構築したい場合やFaaSのように使いたい方にも最適なのでぜひ参考にしてみてください！ 【 Napkin 】 ■「Napkin」の使い方 それでは、「Napkin」をどのように使えばいいのか詳しく見ていきましょう。 まず最初にサイトのトップページから【Sign Up】ボタンをクリックして無料のユーザー登録を済ませておきます。 登録方法はいくつかありますが、今回はもっとも簡単なGitHubアカウントを利用してみます。 確認用のウィンドウが表示されるので承認をし
2021.3.1 アウトプットの精度が上がる！「Adobe XDをプロトタイピングに活かす方法」 研修レポート ツールデザインナレッジ研修 皆さん、こんにちは。 メンバーズキャリアカンパニー所属ディレクターの森山です。 この度、2021年1月26日にオンラインにて開催された「Adobe XDをプロトタイピングに活かす方法」研修を受講しました。 講師は株式会社まぼろし取締役CMOであり、メンバーズキャリアカンパニーの技術顧問も務めてくださっている益子貴寛さんです。 今回の講義は、Adobe XDの機能の中でも、それぞれのワイヤーフレームやデザインをリンクで有機的につなげて、ブラウザで動く画面を作ることができる「プロトタイピング」という機能にフォーカスした内容でした。 ディレクターやマーケター、プランナーなどのノンデザイナー及びノンエンジニア向けの講座ではありましたが、プロトタイピング自体はU
どうも、まさとらん（@0310lan）です！ 今回は、Web開発などで便利に使える無料のオンラインツールやサービスなどを厳選してご紹介します。 面倒なユーザー登録が一切不要なものを集めているので、サイトにアクセスすればすぐにでも使うことができるものばかりです。プログラミング、デザイン、アイデア発想など、さまざまなシーンで活用できるので、ご興味ある方はぜひ参考にしてください！ ■プログラマーに最適な検索エンジン！ 【 Hello 】 プログラムを書いてるときに、構文の書き方やエラーの原因を探るために検索することはよくあると思います。 そのようなときに、この検索サービスを使うと知りたい情報だけをまとめて一気に表示してくれるようになります。英語で検索することに最適化されていますが、ある程度は日本語でも対応してくれます。 例えば、配列をループさせる方法を検索すると以下のように表示されます。 すぐに
どうも、まさとらん（@0310lan）です！ 今回は、UI / UXなどのWebデザインを手軽に作れるFigmaと連携してスマホアプリが作れる無料サービスをご紹介します。 プログラミングは一切不要で簡単なタグをFigmaのレイヤーに記述するだけで、アプリに変換できるユニークな機能が搭載されています。また、Airtableと連携してインタラクティブなアプリも構築できます。 さらに、ネイティブアプリのソースコードにも書き出せるので、アプリストアへの登録も可能です。 手軽にスマホアプリを開発したい方やデザイナーの方も含めて、ぜひ参考にしてみてください！ 【 Bravo Stuido 】 ■「Bravo Studio」の使い方 それでは「Bravo Studio」をどのように使えばよいのかについて見ていきましょう！ まずはトップページの【Sign up】ボタンから無料のユーザー登録を済ませておきま
どうも、まさとらん（@0310lan）です！ 今回は、Webデザインに活用できるモーションデザインをブラウザ上のエディタから誰でも簡単に作れるWebサービスをご紹介します。 手軽に高度なアニメーションを実現できる機能が豊富に提供されており、簡単なものならマウスで数回クリックするだけで完成してしまいます。無料で書き出しにも対応しており、記事後半ではFigmaとの連携方法についても解説しています。 Webのアニメーションにご興味ある方はぜひ参考にしてみてください！ 【 Jitter 】 ■「Jitter」の使い方 それでは、「Jitter」をどのように使えばいいのか詳しく見ていきましょう！ まずはサイトのトップページから【Try it now】ボタンをクリックして無料のユーザー登録を済ませておきます。 メールアドレスや名前などを入力するだけなので簡単です。 登録したメールアドレス宛にログイン用
どうも、まさとらん（@0310lan）です！ 今回は、インタラクティブ性の高いWebサイトやミニゲームなどを簡単に開発できる無料のWebサービスをご紹介します。 一般的なWebサイトはもちろんのこと、ノーコードで高度なロジックを組み立てる機能も提供されているので、アイデアしだいでとてもユニークな作品を作れるのが特徴です。 オリジナリティあふれるWeb作品を手軽に作りたい人はぜひ参考にしてください！ 【 Playful 】 ■「Playful」の使い方！ それでは、「Playful」をどのように使えばいいのか詳しく見ていきましょう！ まずはサイトのトップページから【Sign Up】ボタンをクリックして、無料のユーザー登録を済ませておきます。 「メールアドレス」と「パスワード」を入力します（Googleアカウントも利用可）。 次に好きなユーザー名を設定しましょう。 最後に「LET'S PLAY
今回はNotionのデータベースを活用して、PWAにも対応したWebアプリ開発ができるノーコードツールをご紹介します！ このサービスはNotionデータベースの情報を取得したり、更新・追加などがアプリ側から簡単にできるのがポイントです。ノーコードでさまざまなロジックも構築でき、自分がイメージしたアプリを素早くカタチにできます。 面倒なサーバーの準備も不要なため、誰でも簡単にアプリを開発して公開できます。ご興味ある方はぜひ参考にしてください。 【 NotionApps 】 「NotionApps」の使い方！ まずはサイトの上部にある【Create your app】ボタンをクリックして、無料のユーザー登録を済ませておきましょう。 メールアドレスとパスワードを入力したら【Sign up】ボタンをクリックします。 以下のようなダッシュボード画面が表示されたら準備完了です！ 「NotionApps
どうも、まさとらん（@0310lan）です！ 今回は、面倒な作業が一切不要の無料ホスティングサービスをご紹介します！ とにかくソースコードなどのリソースをドラッグ＆ドロップでアップロードするだけで、誰でも簡単に自分のWebサイトを公開できるのが大きな特徴です。作成できるWebサイトの数や容量もほとんど制限がないのに無料で使えるのも魅力的です。 Webサイトの公開に興味ある方はぜひ参考にしてみてください！ 【 Static 】 ■「Static」の使い方 それでは、「Static」をどのように使えばいいのか詳しく見ていきましょう。 サイトにアクセスしたら【SIGN UP】の項目をクリックして、まずは無料のユーザー登録を済ませておきます。 Googleアカウントから手軽にログイン可能ですが、メールアドレスとパスワードの組み合わせでも簡単に登録できます。 登録が完了したら、以下のようなダッシュボ
どうも、まさとらん（@0310lan）です！ 今回は、URLを入力するだけであらゆるWebサイトの好きな箇所にコメントを付けて、不特定多数の人とシェアできるWebサービスをご紹介します！ Webサイトのデザインや機能について、チーム内だけでなくさまざまな人と意見交換したいときに活用できるサービスになっています。 使い方に関しては究極にシンプルな設計なので、誰でもすぐに利用できるのも大きな魅力でしょう。 【 MarkUp 】 ■「MarkUp」の使い方 それでは、実際に「MarkUp」をどのように使うのか詳しく見ていきます。 まずはサイトのトップページからユーザー登録を済ませておきましょう。メールアドレスを入力したらボタンをクリックしてください。 次にユーザー名とパスワードを設定すれば完了です！ 以下のようなダッシュボード画面が表示されます。 画面上部にあるボックスへWebサイトのURLを入
どうも、まさとらん（@0310lan）です！ 今回は、インタラクティブなユーザー体験を作り出せるWebページを手軽に作れるサービスをご紹介します。 一般的なランディングページやアンケートフォームだけでなく、クイズで遊んだり任意のファイルをダウンロードできたりするページや、クーポン配布ページ、IQテスト、決済ページ…など、さまざまな機能を搭載したWebページをノーコード（NoCode）で開発できるのが特徴です。 既存のWebページやブログなどにも簡単な手順で埋め込むことが可能なので、ご興味ある方はぜひ参考にしてみてください。 【 involve.me 】 ■「involve.me」の使い方 それでは、「involve.me」をどのように使えばいいのか詳しく見ていきましょう。 まずはサイトのトップページからメールアドレスを入力してユーザー登録をしておきます。 次の画面でユーザー名やパスワードな
どうも、まさとらん（@0310lan）です！ 今回は、手描きしたスケッチをAIが美しいワイヤーフレームに自動変換して、動くプロトタイプを誰でも簡単に作成できるWebサービスをご紹介します！ 現時点ではクローズドベータによる参加となりますが、すでに実用的なレベルに調整されています。これからプロトタイプを作成しようと考えている人は、ぜひ参考にしてみてください。 【 uizard 】 ■「uizard」ってどんなサービス？ 最初に「uizard」でどんなことができるのか簡単にご紹介しておきます。 このサービスのポイントは、手描きのスケッチをAIが美しいフレームワークに自動変換してくれることです。 変換方法は簡単で、手描きのスケッチをスマホのカメラで撮影するだけです！ するとAIがスケッチを分析してワイヤーフレームに変換してくれます。 さらに、PCのブラウザからプロジェクト画面を開いて自由に編集で
どうも、まさとらん（@0310lan）です！ 今回は、ブラウザ上で誰でも簡単にWebサイトを作成できる無料の静的サイトジェネレータをご紹介します！ 特別な開発環境を用意する必要はなくて、コマンドラインからの実行も不要でユーザー登録もありません。そのため、誰でも気軽にWebサイトを作り始められる手軽さが特徴になっています。 本記事の後半では、書き出したソースコードを使ってネット上に公開する手順についても解説しているので、ご興味ある方はぜひ参考にしてみてください！ 【 T3MPL 】 「T3MPL」の使い方 それでは、「T3MPL」をどのように使えばいいのか詳しく見ていきましょう。 まずはサイトのトップページを下方にスクロールして、いくつかのテンプレートが表示されることを確認してください。 2020年10月時点において、以下のようなテンプレートを選択できるようになっています。 ランディングペー
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
