サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
会話術
sounansa.net
FAQやwiki、ナレッジデータベースといった類のサイトをサクッと作りたいときにWordpressを使うと便利だったのでご紹介します。 phpMyFAQみたいなOSSのツールを使うという手もありますが、使い方を憶えたり、カスタマイズするのはしんどいです。 使い慣れたWordpressで手軽に構築できるのであれば、そちらのほうが手っ取り早いと思われます。特にFAQサイトでレシポンシブ対応まで実装するのは気が重いですよね。 使いどころは要件次第と思いますが、アプリのオフィシャルサイトでFAQを作りたいときなんかは、スピード重視かつレシポンシブ必須です。そんなときは重宝しそうな気がしますがいかがでしょう。 ちなみにボクは社内wikiみたいな使い方をしています。 このジャンルに関しては無料のテンプレートは少なかったです。有料テンプレートのほうがレシポンシブ対応や機能が充実していることは間違いない事
多くのケースでは、WEBシステムでカラーピッカーを実装しようと思うと、グラデーションのパレットから選択するよりも、あらかじめ決められたいくつかのパレットの中から選択させるほうが、ユーザービリティに優れていると思います。 検索しても出てくるのはグラデーションから選択するカラーピッカーばかりなので、絞り込まれた色のパレットからの選択方式のカラーピッカーを調べてみました。 Huebee 惜しいな。デザインのテイストは悪くないですが、実案件ではこんなにパレットの色は必要ないです。ライセンスはMITです。 md-color-picker Angular用のカラーピッカーです。Angular-Materialをベースに作られています。パレットのパターンがいくつもあります。無駄に高機能すぎるので、もっと機能を絞れると嬉しいです。ライセンスはMITです。 Really Simple Color Picke
業務系WWEBアプリケーションで必ずといっていいほど必要になるのが、データグリッドコンポーネントです。 単純な表組みであれば、HTMLのtableタグで事足りますが、フロントエンドのリッチな表現が当たり前になってきた現在では、そうもいかないケースが増えています。 そういうときは既成のライブラリを利用して開発の効率化図りたいものです。 そこで、データグリッドのライブラリをまとめてみました。 無料のものから有料のものまで全35種類です。 [無料ライブラリ]JQueryを使うデータグリッド appendGrid デザインは少しばかり古臭いですが、行の入れ替えをドラッグ&ドロップで出来たりもします。ライセンスはMITです。 DataTables Bootstrapベースのデザインです。ライセンスはMITです。まぎらわしい購入ページがありますが、任意にてスポンサーになってということです。 Dynat
WEBシステム開発者必見!UIデザインをかっこよくする簡単・便利な方法まとめ 最終更新日: 2019/06/27 WEBサービスを立ち上げたいけど、デザインまで予算をかけられない!新しいWEBサービスの多くはスモールスタートの低予算プロジェクトから始まることは多いです。 そういうときは、予算も、デザインにかけるリソースもない中で、いかにサクッとイケてるデザインを実装できるかが、成功可否をも左右するけっこう重要な要素の一つだったりもします。 非デザイナーでも、それなりにかっこいいUIデザインのWEBシステムが作れるかもしれないいくつかの方法を紹介します。 デザインテンプレートを使って管理画面をかっこよくする最もてっとり早い方法は、テンプレート化したデザインをそのまま使うことです。 デザインの統一感や、余白や色彩のバランスは非デザイナーが自力で頑張っても時間の無駄になることが多いので、テン
morris.jsラインチャート、バーチャート、エリアチャート、ドーナツチャートの4種類だけですが、これで足りるのであれば選択肢としては悪くないとは思います。ライセンスはMITです。 Flotグラフの種類はそれほど多くはありません。2つのグラフを合体させたコンビネーションチャートは実装可能です。ライセンスはMITです。 Chartjsフリーのグラフライブラリの中では一番ポピュラーと思われます。グラフの種類はとても豊富です。ライセンスはMITです。 jquery.sparklineエクセルのセルの中にグラフを挿入するスパークラインという機能のように、HTMLのデータテーブルのセルの中にグラフを挿入する用途を想定したライブラリとなります。簡易なグラフのため、軸線はなかったりしますので、グラフで分析したり、インタラクティブなツールチーップのような機能を期待してはいけません。ライセンスはMITです
業務システムなど、SPA(シングルページアプリケーション)の技術が主流となり、AngularとReactの両雄が主要どころではありますが、どちらも嫌いという人も少なくはありません。 主な理由としては、Angularは難しくて学習コストかかるし、Reactは制限付きBSDライセンスの問題もあって会社での導入は法務部が難色を示すとかの理由で避けたいといったところでしょうか。 そうなると3番手ということでVue.Jsでしょ。 Vue.jsもvue-routerとかのライブラリを使えばSPAを実装できます。 Vue.jsの管理画面デザインテンプレートも数は少ないけど、あるにはあります。AngularとReactの管理画面デザインテンプレートを紹介したのだから、せっかくなのでVue.jsも紹介しちゃいます。 Vue.jsの有料テンプレートはLaravelでバックエンドもセットになっているものも結構あ
2017年版の最新情報として、スマホの画面サイズや縦横比を改めてまとめ直してみました。 前回作成した2016年版のリストに新しい機種を追記し、古い機種は一部削除しております。 SIMフリースマホがずいぶん増えましたので、機種の数がすごいことになってます。 高解像度化の傾向は進む一方です。WEBやアプリの画像の高解像度対応、SVG化は避けて通れなくなりましたね。
業務システムなど、SPA(シングルページアプリケーション)の技術が主流となり、Angularと共に人気なのがReactです。 Reactのほうが学習コストは若干低いこともあり、AngularにするかReactにするか悩ましい選択ですよね。 Angularのデザインテンプレートは過去の記事でも紹介しましたが、AngularだけじゃなくReactもまとめてみました。 Angularも検討されているならこちらもご覧ください。
SVGって扱いにくいよね最近はSVGでアイコンを作る機会が多くなりました。 でも、SVGファイルは困ったことに、WindowsのExplorerやAdobeBridgeでは画像を確認できません。 AdobeBridgeならaiやepsなどのベクター形式の画像ファイルはビューアとして使えるのですが、SVGだけはAdobeBridgeでもダメなんです。昔は表示できたのですけどね。 SVGのファイルは、ご存じのようにWindowsだとデフォルトではIEが紐付けられているので、IEのアイコンになります。(ボクの環境はWindows7です。8.1や10は知りません。) これでは何の画像なのかわからず、いちいちIllustratorで開かないといけないため、業務効率がとても悪いのです。 そこで、SVGファイルのビューアがないものかと探してみました。 フリーソフトのこれが一番良かったです。 SVG Ex
パララックスが組み込まれたWordPressテンプレートを集めてみました。 パララックスを自力で実装するのは手間がかかるので、無料のテーマでサクッと作ってみるのはいかがでしょうか。 ブログサイトでの需要は少ないですが、1ページもののLPとかでは結構ニーズがあるようです。LP制作も最近は手の込んだページ制作が増えてきましたのでHTMLで作るよりWordpressで作るという選択肢も増えてきましたね。 過去の記事でもWordPressのパララックステンプレートを紹介していますので、あわせてご覧ください。
スタイリッシュな管理画面・ダッシュボードの無料&有料HTMLデザインテンプレート 31選 最終更新日: 2021/07/03 業務システムなど、デザイン予算にお金をかけにくい案件では管理画面のデザインに苦労されるエンジニアの方も多いと思います。 デザインは時間をかけずにテンプレートでサクッと作ってしまいたいものですね。 過去の記事「管理画面のHTMLデザインテンプレート 無料&有料テンプレート14選」でも管理画面のHTMLテンプレートを紹介しましたが、まだまだたくさんありますので新たなテンプレートを改めてご紹介いたします。 いくら表に出ない管理画面だからといっても、クライアントに評価されるポイントとして、デザインは結構重要だったりします。 ぜひとも、これらのテンプレートを活用して管理画面をカッコよく作ってみてください。
ビッグデータ分析のトレンドで、天気との相関性を分析する機会が増えています。 気象情報・天気予報をデータ取得するには、気象庁のサイトからCSVファイルをダウンロードする方法や、XML形式のAPIである気象庁防災情報XMLを利用する方法があります。これらは無料で利用できるのですが、残念ながら個人利用に限定されているため商用利用はできません。 商用利用するためには、有料の気象データ配信サービスを利用するよりほかありません。 商用利用可能な気象データ配信サービスは、公益法人の提供するサービスと民間企業で提供されるサービスがあります。 民間企業から提供されるサービスでは、独自の加工を加えた天気予報データや、ユーザーの欲しい形式にフォーマットを合わせてくれたりと、親切なサービスが特徴です。 気象データといっても様々な種類のデータがありますし、欲しい拠点数次第で料金も大きく異なります。 利用目的をはっき
WEBサービスを作るときにはどうしても必要になる管理画面ですが、あまり管理画面に手間をかけたくないのでBootstrapのようなデザインフレームワークを採用するすることも多いと思います。 レシポンシブな管理画面を作ったり、グリッドレイアウトにしたり、フォームまわりをこぎれいにするにはBootstrapは便利ですからね、やっぱり。 管理画面をBootstrapで作ったなら、フォームの統一感を考慮し、ログイン画面もBootstrapで作るのが普通かと思います。 でも、本家Bootstrapのサイトにあるサンプルのログインページでは物足りないと感じることも多いのではないでしょうか。 Bootstrapオフィシャルサイトのサンプルログインページ そこで、Bootstrapを使った無料のログインページテンプレートを集めてみました。 ログインページごときに手間をかけたくないので、コピペしてサクッと実装
無料テンプレート42選 Bootstrapを使ったかっこいいHTMLテンプレートを集めてみたよ 最終更新日: 2019/06/27 Bootstrapも間もなくバージョン4だそうです。機能も進化して使い勝手もずいぶん良くなりました。 昔はそのデザインテイストをBootstrap臭と揶揄されたものですが、カスタマイズ性が良くなったのか、使い方が理解されるようになったのか、最近ではBootstrapを利用したWEBサイトもよく見かけます。 そして、Bootstrapを使ったデザインテンプレートもたくさん見かけるようになりました。 中には有料テンプレートに勝るとも劣らない素晴らしい無料テンプレートもたくさんあります。 今回は、Bootstrapを使ったおしゃれでかっこいい無料HTMLテンプレートを集めてみました。 以前に書いた記事で紹介した無料HTMLテンプレートの中にもBootstrap
おしゃれなセレクトボックス(ドロップダウンリスト)のCSS・javascriptサンプルまとめ 最終更新日: 2017/09/16 フォームのselectタグをそのまま利用するとデザインが味気ないですよね。でもフォームはCSSでデザインをいじるのに苦労することが多いのも事実であり、手間をかけてられない部分でもあります。 ここは手っ取り早く、他人が作ったおしゃれなセレクトボックス、ドロップダウンリストのデザインを参考にしてしまいましょう。 以下に紹介するセレクトボックス・ドロップダウンリストはすべてHTML、CSS、javascriptのソースが確認できます。 セレクトボックスをかっこよくすることでデザインの差別化を図ってみてはいかがでしょう。 ここで紹介するセレクトボックスは、すべてこのページ内でサンプルの動きを確認できるようにしています。 どうぞクリックしたり、マウスのhoverを確
パララックスが組み込まれたWordPressテンプレートを集めてみました。 HTMLサイトへ自分で実装するには、JavascriptやCSSの知識が必要だったりと敷居が高いですが、WordPressのテンプレートの中にはパララックスが組み込まれたものも結構ありますので、手軽にパララックスを試してみることができそうです。 過去の記事の「全部無料!パララックスがオシャレなWordPressテンプレート5選でもWordPressのパララックステンプレートを紹介していますので、あわせてご覧ください。
Visualizerウィザード形式で、グラフ作成画面が手順を案内してくれるので、とっても親切なプラグインです。 グラフのビジュアルも美しく、グラフ上へマウスカーソルをのせるとツールチップで数値を表示してるほど、高機能なグラフを作成可能です。 CSVファイルのデータを読み込むため、いちいちデータをWordPressへ手入力する必要はありません。数字のデータを編集するのはExcelで行うのが一番効率的なので、サクッとグラフを作成したいときには嬉しい機能です。 CSVファイルのアップロードもウィザード画面のステップの一つとして組み込まれており、ファイルアップロードのための画面遷移が少なくて済むのでとても使いやすいです。 グラフの種類も豊富でイチオシのプラグインです。 Chart ExpertこちらもCSVファイルを読み込みグラフを作成します。 Visualizerに比べれば、グラフの機能やビジュ
2016年版の最新情報として、スマホの画面サイズや縦横比を改めてまとめ直してみました。 前回作成した2014年版のリストに追記する形をとりました。 SIMフリー携帯の登場で、機種の種類はだいぶ増えたようにも感じます。 ほとんどの機種が16:9ですね。規格が統一されることは、プログラマーやデザイナーには嬉しいかぎりです。
Pochikin[ポチ勤]ブラウザで利用するタイプのタイムレコーダーシステムです。 タイムレコーダー画面、管理画面ともにモバイル対応しています。勤務時間の集計はCSVデータをEXCELテンプレートに貼り付けて集計します。テンプレートは色々なパターンが用意されており、しかも無料です。 UIもシンプルでとても使いやすいです。 タイムレコポン人数・拠点数などの一切の制限なく無料で利用できます。タイムレコーダーはiPad、Androidタブレット、パソコンのいずれにも対応しています。 好みのデザインに着せ替えができるのも特徴です。給与計算はCSV出力したデータをEXCELで加工して集計します。 ※サービス終了いたしました スマレジ・タイムカードiPad、iPhone、Android、PCに対応したタイムレコーダーです。タイムレコーダー機能のみ無料です。給与計算機能を利用するためには月額4,000円
ナビゲーションメニューとかのリンクにマウスを載せたときのアニメーションのサンプルでおしゃれなものを見つけたので紹介します。 CREATIVE LINK EFFECTSこのページでデモを確認できますので、マウスを載せてみてください。 いっぱいあって、どれを使おうか悩んじゃいますね。 こういうのをナビゲーションメニューに使われているのを最近よく目にするようになりましたが、クリエイティブなhoverアニメーションがこれからのWEBデザインの定番になりそうなので、ぜひ憶えておきたいテクニックです。 尚、ソースはこちらからダウンロードできます。 http://tympanus.net/codrops/2013/08/06/creative-link-effects/ よろしければこちらの記事もどうぞ 2015年版 まだまだあるよ!今どきのおしゃれなリンクのhoverを実現するCSSアニメーションサン
2020年最新版 iPhone・Androidスマホ 機種別画面サイズ、解像度、縦横比のまとめ 2020年版の最新情報として、スマホの画面サイズや縦横比を改めてまとめ直してみました。 開発や制作活動にお役立てください。 ここに記載のないさらに古い機種については前回作成した2018年最新版のリスト... April 18, 2020 続きを読む カミングスーンページのかっこよくてレシポンシブなWordPressプラグイン5選 WordPressでは制作途中の段階ではカミングスーンページを用意したいという場合には、テーマではなくプラグインで実装するのが便利です。 カミングスーンページのプラグインというのは、ログイン済み管理者... May 18, 2019 続きを読む
WEBシステムをつくるときに管理画面のデザインは、予算や時間の都合から工数をかけにくい案件も多いですね。 社内システムであればなおさらです。 使い勝手の要素としてUIは重要な一つであることは、わかってはいるんですが。。。。 カッコいいデザインをサクッと作るためには、Bootstrapはとてもありがたい存在です。 デザイナーが思っているほどBootstrap臭なんて気にしてません、一般人は。というより知らないですBootstrap自体を。 システム屋さんはこういう便利なものはガンガン活用して生産性を上げましょう。 今回、無料と有料のHTMLテンプレートをそれぞれ紹介いたしますが、有料とはいっても日本円で2~3千円程度とリーズナブルです。 有料のものは、ログイン画面や、モーダル、チャート、データグリッドなどが充実しています。 レシポンシブのログイン画面のデザイン一つ作るだけでも1時間ぐらいかか
タブレット対応などで良く使う、デフォルトでは非表示だけど、ボタンやアイコンをタップするとサイドメニューがにょきっと登場するやつです。 一般的なデザインフレームワークなんかでは、スマホと一緒で上から降りてくるアニメーションの一択であることが多いです。 いや、やっぱり横からサイドメニューを登場させたいのよ!って思うときありますよね。 でもアニメーションを仕込むのが超超超超超メンドイです。 オシャレなサイドメニューの登場アニメーションがないかなーと探していたら、ステキなものを見つけたので紹介。 TRANSITIONS FOR OFF-CANVAS NAVIGATIONSCSSとjsを使ったテクニックです。 アニメーションなので、デモを見た方が早いです。 デモはこちら たくさんあるアニメーションの中のいくつかを紹介します。 これが元の状態です。サイドメニューは表示されていません。緑のボタンのいずれ
サクッとログイン画面だけ作りたいけど、それなりに見栄えのするデザインで、且つマルチデバイス対応しようと思うと、そこそこ手間は必要になります。 非デザイナーさんにはログイン画面ごときに手間かけたくないという思いはごもっとも。さらには、わざわざログイン画面のためにCSSフレームワークを入れることに抵抗があるケースも多いでしょう。 そこで、すぐに使えるログイン画面のHTMLテンプレートをまとめてみました。
sounansa.net > デザイン > 無料テンプレート40選! レシポンシブなHTML5・CSS3のサイトテンプレート 1ページものを集めてみた 無料テンプレート40選! レシポンシブなHTML5・CSS3のサイトテンプレート 1ページものを集めてみた 最終更新日: 2019/06/27 レシポンシブデザインでのサイト制作は今や普通の事となってきましたが、コーダーにとっては一から作るのはちょっと大変ですよね。 レシポンシブなテンプレートは海外サイトであれば無料のテンプレートがたくさん見つかります。 こういう物をうまく活用して生産性を上げていくことで、デザイナーさんは楽しちゃいましょう。 無料でもクオリティーは高いものが最近は増えています。 フリーテンプレートはスタートアップ系テイストのデザインが多いのかなと傾向として感じられます。 スタートアップなら尚更、活用しない手はないで
これからはボタンのhoverで色を変えるだけじゃダメ?波紋のエフェクトをGoogleが推奨 最終更新日: 2016/06/16 Googleの提唱するデザインの指針「Material Design」でアニメーションについての記述が興味深いです。 この中の一つに波紋のアニメーションでクリック(タップ)時の反応を表現することについて記載されています。 クリック(タップ)で波紋のアニメーションは、確かにユーザーの操作に対する反応をアニメーション表現する上で、確かにわかりやすくて良い表現だと思います。 以下にデモを用意しましたので触ってみてください。 ボタンをクリックした時のアニメーションに注目です。 デモ これをCSS3でアニメーション作るのはちょっと手間ですよね。 便利なjavascriptのライブラリがありますので紹介します。 Waves Waves Wavesの使い方使い方はメチャ簡単
スマホの画面サイズや縦横比を改めてまとめてみました。 Android、iPhoneともに流れとしては16:9へ統一されてきましたね。 問題はいつまでiPhone4S以下の3:2に対応するかですかね。
Woody木目の写真を背景に使ってみました。子ページは暗い色調にしてあるから背景がうるさくならないようにしてあります。 ダウンロード Stripe北欧テイストっぽいストライプのスライドです。子ページはフッター部分にだけ背景を置いているので、印刷用途でも使いやすいかも。 ダウンロード Ivy草やツタをモチーフにしたイラストをあしらってみました。けっこうグラデーションを使わないシンプルな背景のほうが使いやすいんですよね。 ダウンロード Grungeグランジ風の背景画像のスライドです。 ダウンロード Elegantちょっと高級感あるテイストの背景画像です。女性を意識したアッパー層向けのシチュエーションとかで使うのかな。作った本人は多分使うことなさそうな気がしてきた。 ダウンロード Cafeカフェの写真をぼかして背景につかってみました。 ダウンロード Diamondビジネス用途のマジメな感じのテン
WordPressのフォームのプラグインは高機能なものが多いです。 バリデーションチェックや入力された内容のデータベース化など、フォームだけのためにWordPressでサイト構築しようかなと悩んでしまうほど。 ただ、フォームの機能は数値の計算機能までできるものは少ないのですが、数少ない数値データの計算可能なプラグインを見つけたので簡易見積システムを作ってみました。 使用したのはJazzy Formsというプラグインです。 CPUやメモリを選択すると金額が随時再計算されて、見積価格が動的に変化します。 見積システムのつくり方Jazzy Formsをインストールしたら、サイドメニューのFORMを選択。 次のような画面が現れるので、左側の必要なパーツを右側へドラッグ&ドロップします。 フォームにはいくつか種類がありますが、まずはサンプルで使用したラジオボタンの説明です。 <説明> title:ペ
次のページ
このページを最初にブックマークしてみませんか?
『sounansa.net』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く