個人開発で即戦力になるツール・サイトまとめ - Qiita
はじめに 個人開発もエンジニア自体の歴も浅いSEです。 就業先がJavaをメインで使う企業なのですが、個人的にフロントエンドまわりが好きです。 元々、興味本位でデザインの本だったりUXに関する本とかを読んでいたりするのですが、 その結論の際にたどり着いたのが、 「理論とか決まってるなら、それをよしなにやってくれるor参考にできるツールとかサイト探せばよくね」 という結論になりました。なんと怠惰な思考でしょうか。 そんなわけで、こちらではデザインに限らず、色々開発に便利なツールを紹介させていただきます。 （有名なのが多いかもしれませんが、ご容赦ください、結局有名なものに行き着くのです） レイアウト関係 1. Awwwards おしゃれなwebサイトが集まっているサイトです。 ここまで個人開発でお洒落にできたらいいなと思いますが、自分はアニメーションを考えるときや、 作りたいフロント側のデザイ
成功法則が詰まったBtoBサイトの標準ワイヤーフレームを無料配布します | knowledge / baigie
約1年前、BtoB企業における顧客獲得型サイトの勝ちパターンをまとめた『BtoBサイト・チェックリスト』を、ベイジ、才流さん、WACULさんの3社連名で発表し、大きな反響をいただきました。 このチェックリストはブログで公開しただけではなく、私たちのウェブ制作の現場でもフル活用されています。この1年間に手掛けた多くのBtoBサイトが、このチェックリストを満たすように設計され、多くのBtoBサイトでコンバージョン数/率やフォーム誘導数/率の向上など、ポジティブな変化が生まれました。 このような活動の中から、『BtoBサイト・チェックリスト』の内容を満たした『BtoBサイト・ワイヤーフレーム』なるものが誕生しました。これを今回、皆さんにご提供します。リード情報なども一切取らず、そのまま丸ごとお渡しします。 BtoBサイト標準ワイヤーフレームXD版（770KB） BtoBサイト標準ワイヤーフレーム
AIが手描きのスケッチを美しいプロトタイプに変換してくれる「uizard」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、手描きしたスケッチをAIが美しいワイヤーフレームに自動変換して、動くプロトタイプを誰でも簡単に作成できるWebサービスをご紹介します！ 現時点ではクローズドベータによる参加となりますが、すでに実用的なレベルに調整されています。これからプロトタイプを作成しようと考えている人は、ぜひ参考にしてみてください。 【 uizard 】 ■「uizard」ってどんなサービス？ 最初に「uizard」でどんなことができるのか簡単にご紹介しておきます。 このサービスのポイントは、手描きのスケッチをAIが美しいフレームワークに自動変換してくれることです。 変換方法は簡単で、手描きのスケッチをスマホのカメラで撮影するだけです！ するとAIがスケッチを分析してワイヤーフレームに変換してくれます。 さらに、PCのブラウザからプロジェクト画面を開いて自由に編集で
無償のデータベースと連携可能！Webサイトもブログも作り放題な「AppDrag」を使ってみた - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、初心者の方でも簡単にWebサイトやブログなどを作成して公開まで可能な無料のWebサービスをご紹介します！ また、簡単にデータベースを構築したり独自のAPIを作成したりすることも可能で、使い方次第では簡単なWebアプリまで作れるポテンシャルを秘めているのが特徴です。 非常に多機能なサービスということもあり、初心者の方から上級者まで幅広く楽しめるのでぜひ参考にしてみてください！ 【 AppDrag 】 ■「AppDrag」の使い方 それではまず最初に、「AppDrag」がどのようなサービスなのかを実際に使いながら見ていきましょう！ サイトのトップページにある「ボタン」をクリックします。 無料のユーザー登録を行う画面になるので、必要事項を入力していきましょう。 ユーザー名、メルアド、パスワードだけで誰でも簡単に登録できるので便利です。 次に、
JavaScriptで自分だけのWeb製作エディタを構築できる「GrapesJS」を使ってみた！ - paiza開発日誌
どうも、まさとらん（@0310lan）です！ 今回は、ドラッグ＆ドロップで誰でも簡単にWebサイトを製作できるサービスのご紹介です！ そのままでもWebオーサリングツールとして大変便利なのですが、JavaScriptで好きなようにカスタマイズしてオリジナルのエディタを開発＆公開できるという面白い特徴があります。 現在、オープンソースとして活発に開発が進められているので、ぜひこの機会にみなさんも試してみてください！ 【 GrapesJS 】 ■「GrapesJS」の使い方！ それでは「GrapesJS」を使ったWeb製作エディタがどのようなツールなのかを見ていきましょう！ トップページにある「Webpage Demo」というボタンからアクセスすることができます。 登録なども不要で、すぐにブラウザ上で「エディタ」が表示されます。 この画面上で、自分の好きなようにWebサイトを製作することができ
Web界隈で最近気になるWebサービスとか集めてみた【2017年8月版】 - Brian'z Imagination
インターネットに触れている時というのは、大抵ひとりのときだ。 ここ半年くらい、おかげさまでいろいろな人に出会い、ブログを書くのも疎かになってしまったけれど、またひとりになる時間が増えそうなので、またブログを書き始めようと思っている。 さて、今夏の池袋はサウナのような状態になっているけれど、人混みに負けず冷房を効かせたサンシャインシティの一角で、コツコツと収集していたWebサービスをおよそ1年ぶりに紹介していこうと思う。 海外編 Topol.io Topol.ioは無料から始めることができるかっこいいデザインのHTMLメールが作成できるエディターだ。 デスクトップベースで、豊富なテンプレートを選べば簡単にセンスのいい画像入りのメールを作成することが可能。 Matte Mockups Matte MockupsはCSS3をベースにしたiPhoneやiPadなどのモックアップだ。 画像埋め込み型
これ知ってる？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 ひとりブレスト 関連キーワード取得
UI/UXデザイナーなら一度は目を通しておきたい「デザイン原則」まとめ【随時更新】
世に出ている「デザイン原則」と呼ばれるものたちをまとめてみました。 ユーザビリティ関連からモバイルUX、サービスデザインにいたるまで、広い範囲のデザイン原則を網羅したつもりです。ただし、チェックリスト的にまとめたため、内容の詳細は記述していません。 出典や内容を紹介している外部リンクを張っておきましたので、詳細を確認したい方はそちらをご参照いただければと思います。 なお、この記事は有用なデザイン原則を見つけ次第、随時更新していきます。 更新履歴 2018/10/01： 「アクセシビリティの4原則」「Material Designの原則」「Android TV デザイン原則」「インクルーシブデザインの原則」を追加 2016/12/28： 「Microsoft デザイン原則」を「Windows UX デザイン原則」にアップデート 「Apple Watch デザイン原則」を追加 2015/10/
Webデザイナーのスキルアップに役立つ便利なチートシートのまとめ
先月は「Web制作時に備えておくと便利なチートシートのまとめ」でデベロッパ向けのチートシートを紹介しました、今回はデザイナー向けのチートシートをまとめました。 Photoshopの各バージョンに対応したショートカット、ブラシやペンツールの使い方、初期設定をはじめ、デザインの要素と原則、カラーセオリー、タイポグラフィ、グリッドシステム、レスポンシブなど、デザインの現場で役立つものばかりです。 Adobe Photoshop Keyboard Shortcuts Photoshop 5-7, CS1-4, CCまで、Win/Mac用のキーボードショートカットがそれぞれPDFでダウンロードできます。 また、ショートカットがない便利な操作にショートカットを割り当てたショートカットファイルもダウンロードできます（チートシートでは「c」がついています）。
フロント作業の効率化
下記勉強会の発表資料です。 --------------------------------------------------------- JSLOVE 〜JavaScriptを愛する人の話を聞いてみよう〜 http://devlove.doorkeeper.jp/events/5811 ---------------------------------------------------------
フリーランスも知っておかないといけないデザイン料金の相場まとめ
フリーランスをスタートして半年以上が過ぎて、まだまだ月々の売上は売上報告にも書いている通り、多い時と少ない時の差がかなりありますが、ありがたいことに仕事自体は次第に増えています。 そうするとしっかりと考えておかないといけないのが、デザイン料金の設定です。これまではクラウドソーシングでのコンペや受注案件など、価格が決まっているものに応募したり、受けたりする流れでしたが、これからクライアントや代理店の方と直で料金の交渉をしたり、見積書を提出することが増えていきます。 そこで改めてその中のデザイン料金の相場について考え、まとめてみました。 デザイン料金で揉める場合 サバイブログでは過去に「デザインのクオリティと値段の関係をハッキリさせておこう」、「【クラウドソーシングも含む】プロに低料金の案件を気持良く、しっかり仕事をしてもらうコツ」という記事で、デザインとお金の関係に関しては色々と思うところを
アプリデザインの参考になるUI/UXデザインギャラリーサイト10選 - 株式会社モンスターラボ
オンボーディングのUXデザインの参考になる海外Webサイト 「オンボーディング」とは、初めてサービスや製品を使うユーザーがヘルプや説明書を読まなくても使っていくうちに操作方法がわかるように設計する手法のことです。 いかに素晴らしいプロダクトであっても、初めて使用するユーザーにストレスを与えてしまい、すぐにアンインストールされてしまっては意味がありません。 オンボーディングのUXデザインで参考にしたいのが、以下の2つのWebサイトです。 アプリデザインまとめ① User Onboarding 「User Onboarding」は海外のアプリや有名Webサービスのオンボーディングについて紹介しているWebサイト。 オンボーディングを画面単位で切り分けて、参考になる点と改善が必要な点をピックアップしています。 サンプルはスライド形式で表示されます。簡単な英語で解説されているので、英語が苦手な人で
フラットデザインのアイコンセットまとめ - NxWorld
沢山出てきていい加減もう見飽きた感も正直ありますが、見つけてはメモしていたフラットデザインのアイコンセットがかなりの量になっていたので整理兼ねてシェアします。 紹介しているアイコンを使用する際は、ライセンス等は各自で再度確認してください。
Bootstrapのカスタマイズが簡単にできてしまうオンラインツール -Bootstrap Live Customizer | コリス
Bootstrapの実際のページ表示を確認しながら、リアルタイムに簡単にカスタマイズできるオンラインツールを紹介します。 カスタマイズにはスタイルシートの知識はあまり必要なく、直感的にできます。もちろん知識がある人はより高度なカスタマイズが可能です。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Macaron | Visual component editor for Web development
Free open source icons, illustrations, emojis and graphics - Iconduck
designclue（デザインクルー） - デザインクラウドソーシング
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
Bootstrap 5 & Vanilla JavaScript - Free Material Design UI KIT
UX/UIデザイン - OHAKO | 企画～実装をご支援
