アイディアをすぐに形にしよう！エンジニア必見Bootstrapライクなデザインテーマまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
エンジニアからプロレスラーに昇格した勝利です。 (首、太いだろ？) 好きな技は蝶野親分の「ケンカキック」です。 さて、 エンジニアの方なら誰しもが通ると思われる、アイディアを思いついた後に実装する際に避けては通れない道、 そう、デザイン部分の構築。 聞いただけでもう蕁麻疹がおさまらないですね。 そんなとっかかりの部分を簡単に実装できるツール。 そう、Twitter Bootstrap。 Twitter BootStrapとは・・・ BootstrapはWebデザインが得意ではないエンジニア向けにTwitter社が開発／提供するCSSフレームワークです。このTwitter Bootstrapを利用すると、簡単にTwitterっぽいデザインのWebサイトを作成できます。 ただ、Bootstrapだけではもの足りなくなったあなた。やっぱりバリエーションは多数もっといた方がいいですよね。 そんなあ
あなたのデザインの自由度を邪魔しない、軽量なグリッドデザインフレームワーク·PocketGrid MOONGIFT
PocketGridは0.5KBの小さなCSSフレームワークです。レスポンシブWebデザインのベースにどうぞ。 Bootstrapをはじめ多様なデザインフレームワークが出回っていますが、デザインの可能範囲が狭まってしまうのを嫌がる声もあります。そこでほんの基礎部分だけを提供してくれるグリッドデザインテンプレート、PocketGridを使ってみましょう。 サンプルです。左が30%、右が70%のコンテンツです。 幅を狭めても比率を維持しています。 よくある三層のWeb構造です。 このように組み変わります。 比率を維持させることもできます。 より複雑な表示です。 レスポンシブに並びが変わっています。 維持させることもできます。 元がこれで… 隙間をなくす設定も可能です。 PocketGridはピュアなCSSだけで作られています。レスポンシブだけでなくセマンティックにも対応しています。メディアクエ
10代のユーザビリティ： ティーン向けWebサイトのデザイン
ティーンは、自分のウェブを扱う能力に（過剰に）自信を持っているが、彼らのパフォーマンスは大人に劣る。読解レベルの低さや、忍耐力のなさ、発展途上の情報収集スキルにより、ティーンのタスク成功率は低くなる。そのため、サイトはシンプルで共感しやすいものにする必要がある。 Teenage Usability: Designing Teen-Targeted Websites by Jakob Nielsen on February 4, 2013 日本語版2013年2月18日公開 ティーンはインターネットにつながっている。テクノロジーがティーンエイジャーの生活に深く溶け込んでいるため、彼らに役立つ、ユーザブルなウェブサイトを作り出すことがこれまで以上に重要になってきている。次善のものがクリックするだけで手に入り、SMSメッセージによる割り込みが例外ではなく普通のことである世界で成功するには、ウェブサ
「やる気」を他人が出させることはできない - インターネットの備忘録
後輩指導とか教育の話になるとよく「相手にやる気を出させる」って単語が出てきて本当にうんざりします。 他人から無理やり押し付けられても、それは「やる気がある演技」にしかならなくて、結局破綻する。「いいから頑張れよ」とか「根性見せろよ」とかいうスタイルの指導も内容がフンワリしすぎて、何をどうすればいいかまったく指示していないわけで、これって指導者の怠慢だよなーと思います。 わたし自身も「部下がやる気ない」みたいな問題にぶつかったことがありますし、その時は指導方法が分からなくて、「うーんどうしたらいいかよくわかんないけど何しろ頑張ろうよ！」という大雑把な投げ方をしてしまって、心底反省しています。 ここでイカンのは「他のチームはこんなに頑張ってるんだから負けるぞ」とか「次の査定に響くぞ」みたいな、ハッパをかけるという名の脅しをしてしまいがちだったこと。当時の自分に「バカッ!!!」って平手打ちしたい
なんか作ってインターネットで発表するときに考えていること - MEMOGRAPHIX
ぼくの体験から考えたことを書くので、この記事で書いてあることは個人でつくれる規模のものに限ります なんか作ってインターネットで発表するとき、最初から作りこんでリリースしたほうが良いと思った。 適当な完成度でとりあえず出して、あとはみなさまの意見をききながら改善していこうっていう考えもあるけど、あまり賛成とはいえない。みなさまの意見みたいなの、そんなに真剣にそのプロダクトのこと考えてる人いないから、だいたい文句言う感じになると思う。 最初に作りかけの状態で出すと、完成してないですねって思って帰っていくから、いつまでも完成しない新宿駅みたいな感じのイメージになると思う。半年くらいして完成度が高まってきてからどれどれって感じでまた様子を見に来る人そんなにいると思えない。 twitterとかで告知するときも、初めて告知したときが一番伸びるから、仮にそのあと完成度が高まったとしても周知する手段がない
少しのコードで実装可能な20のjQuery小技集
2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ ↑私が10年以上利用している会計ソフト！ 追記：この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です！詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方 まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます
Git pullを使うべきでない３つの理由 · DQNEO日記
git pullは使わなくてもよい 初心者はgit pullを使わない方がよい 我々ソフトウェアエンジニアは勉強が大好きなので、コマンドがあるとそれを勉強して使いこなさなければいけないと考えがちですが、ときには「覚えない、使わない」という発想も大事なのではないでしょうか。 以下にその理由をのべます。 git pullは使う必要がない git pullを使わないとできないこと、というのはありません。 使わなくても全然困りません。 git fetchとgit mergeとgit rebaseだけですべての用は足せます。 私はチーム開発でGitを本格的に使い始めて数か月経ちますが、普段の作業でgit pullを使ったことはないしそれで困ったこともありません。 git pullを使わなければ、余計な落とし穴に落ちない git pullには落とし穴があります。 初心者はたいていその穴に落ちます。 「
レスポンシブWebデザインにおけるコーダーの役割 World of granshe.
先日、Twitterで 『レスポンシブWebデザインをする際に、ナビゲーションなどをPC用とSP用の2種類、HTML内に書いて、出し分けることがあるようだ』 というようなことをつぶやいたのですが、自分では思ってもいないところでリツイートされました。 自分はちょっとした愚痴のつもりで書いたのですが、これはもうちょっと深く考えるべき問題なのかもしれない。と感じ、 自分なりにもうちょっと考察して、人と話して、自分なりの答えが見つかったので書いてみます。 私の周辺では、レスポンシブWebデザイン（以下、RWD）の案件をやるとき、「PC用」「スマホ用」2種類のデザインをお客さんに提出し、それをベースにコーディングすることが多いです。 PCサイトとスマートフォン最適化サイトを両方作るのと同じような手法です。 いわゆる「スマートフォン最適化」では、PCとスマホ用のHTMLは別で作れますので、デザイン上の
Amon2::Plugin::Web::Rawというのを書いてみた - 車輪を再発明 / koba04の日記
Amon2::Plugin::Web::Rawというのを書いてみました。 追記ModuleをWeb::ImageからWeb::Rawに変更 https://github.com/koba04/Amon2-Plugin-Web-Raw 何 まぁ見ての通り、Pluginを読み込むとrender_rawっていうメソッドが生えてデータのtype(gif, png, jpeg, swf, zip)とバイナリデータを渡すとPlack::Responseにして返してくれるだけのものです。 Pluginにするほどではないのですが毎回書くのは面倒なのでPluginにしてみました。 用途 画像は通常は静的サーバーで配信すると思うのですが、アプリで合成して画像を出力したり、画像にもアプリと同様の認証をしたいという時に使えるかなと思っています。 Dist::Milla便利 http://weblog.bulkne
橋本商会 » 別ドメインのiframeの中身をフレーム外からスクロール
諸事情あって、iframeの中身をフレーム外側のページからJavaScriptでスクロールできるのを作った。 ふつうは別ドメインのページをiframeに読み込むとスクロールできないんだけど、（marginに負の値を入れたりして）iframeごと上下左右に動かしたり、iframeの外側にbox要素2つ付けてはみだした部分を表示しないようにcssでなんか色々やったりしたらそれらしい物ができた。 デモ XFrame.js shokai/xframe.js · GitHub 使い方は簡単である js読み込んで <script src="xframe.js"></script> XFrameを出したい箱を作って <div id="tv"></div> 読み込む var xframe = new XFrame("div#tv"); xframe.load("http://shokai.org"); あ
レタスにしか見えない傘。野菜をモチーフにした「ベジタブレラ」が凄い。職人さんの手づくりで丈夫。 : 伊勢海老太郎ブログ
伊勢海老太郎ブログ 世界のインテリアと雑貨と文房具、Apple(iPhone)、食、ファッション、アート、デザイン、雑学コネタ、千葉と東京の食べ歩きなどをまとめるブログです。 どうも、サラダが大好きな伊勢海老太郎(@iseebitaroublog)です。最近、葉物野菜が高いですよね。肉料理よりも、サラダを作る方が高くなってしまいそうです(笑)。上記画像ですが、美味しそうなレタスですよね。でもレタスではないのです。何だと思いますか？ 正解は傘です。折り畳むとレタスになります。広げてもかなりレタスっぽいので、ちょっと使うのが恥ずかしいです(笑)。 「ベジタブレラ」という商品です。日本の傘メーカーの商品です。職人が1つ1つ手づくりで作っているそうです。日傘としても使用が出来るそうですよ。気になる価格は4,725円です。 伊勢海老太郎ブログでは過去にこんな傘も紹介しました。 オシャレなデザインでお
nextTick、setTimeout(fn, 0)の代わり - 素人がプログラミングを勉強していたブログ
setTimeout(fn, 0)より高速な関数は最近はこんな感じのを使うといいと思う。 var nextTick; if (typeof setImmediate === 'function') { nextTick = setImmediate; } else if (typeof process === 'object' && typeof process.nextTick === 'function') { nextTick = process.nextTick; } else if (typeof MessageChannel === 'function') { (function () { var channel = new MessageChannel(); var queue = null; channel.port1.onmessage = function () { t
requestAnimationFrame ＜ よーしおまえらー、アニメーションにsetInterval使うなよー - くろまほうさいきょうでんせつ
より適切なものが追加されたのでそっちを使いましょう。 setInterval/setTimeout → requestAnimationFrame; これまでは setInterval function render(){ // アニメーション 1フレーム分の処理 } setInterval(render, 1000 / 60); これはもう古い。 これからは requestAnimationFrame function animationLoop(){ render(); requestAnimationFrame(animationLoop); } animationLoop(); こうすべし。 requestAnimationFrameにすると何がいいの？ 複数のアニメーション描写処理を一つにまとめて最適化してくれる 同じ用に動かしている物体A,Bの動きが次第にずれていくとかがなくな
言葉選びよりも、伝える順番が大切！ 部下を育てる｢苦言の作法｣とは？
仕事がデキる女性になるということは、｢誰かの上司になる｣ということでもあります。それはつまり、部下を育てる責任を負うこと。上司が｢育てよう｣と思わなくても、部下は上司の影響をよくも悪くも受けてしまうもの。もしかしたら、あなたの接し方ひとつで、部下の今後の成長が頭打ちになってしまうかも......。自分の部下には成長してほしいと多くのキャリアウーマンのみなさん思っているはず！そこで今回は、上手な部下育てについてご紹介します。■"言わない優しさ"は部下育てを阻む部下の成長を願って、あえて、苦言を呈する瞬間がありますよね。部下が失敗した時、問題が発生した時など、場面は様々。誰でも嫌な話はしたくないもの。仕事とはいえ、明るい気持ちで人を叱れる人はいませんよね。でも、言いにくいことも言わなくては部下が成長しないというとき、どのように相手に伝えているでしょうか。ある営業職の女性は｢はっきり伝えると泣き
意外と便利？PHP製のHTML用問い合わせ言語·htmlSQL MOONGIFT
htmlSQLはHTML構造にSQLを使って検索できるようにするライブラリです。 HTMLを操作する際にはDOMを使ったり、正規表現を使うのが一般的です。しかしもう一つのやり方を提案するのがhtmlSQLです。何とSQL（問い合わせ言語）を使ってHTMLソースを探索できます。 コード例。PHPで操作します。 こんな感じで取得できます（301になってしまっていますが…）。 こちらもコード例。SQLっぽい記述が面白いです。 クラスやIDなどで絞り込んだり、特定のタグだけを抽出することも簡単にできます。そして指定した要素だけ抽出して処理が可能です。今後、LIMITなどにも対応していくとのことです。 htmlSQLはPHP製、New BSD Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る SQLはサーバサイドで使われるプログラミング言語と構造体系が大きく異なるために
スタートアップがデザインを優先事項にすべき理由 - SEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
無料で資料をダウンロード SEOサービスのご案内 専門のコンサルタントが貴社サイトのご要望・課題整理から施策の立案を行い、検索エンジンからの流入数向上を支援いたします。 無料ダウンロードする ＞＞ 最近のスマホアプリやウェブサービス、以前に比べるとデザイン的にも優れたものが増えてきたと思います。その機能以上にユーザビリティ的な使いやすさはもちろん、デザイン的なオシャレ度やクール感がサービスの成功を左右するようにもなってきた時代、今回はスタートアップがデザインが力を入れるべき理由について考えた記事をテックメディアの中でも以前からデザインには人一倍こだわりがあるThe Next Webから。 — SEO Japan テクノロジーを活用したスタートアップを始めることについて考えている？もしくは、既にテクノロジーベースのベンチャー企業やスタートアップを経営しており、それを成長させることに積極的に取
人間中心のデザインの原則 －『誰のためのデザイン？』を読んで－
皆さんは下記のような経験はありませんか？ ドアを開けたいんだけど、パッと見て押したらいいのか引いたらいいのか、はたまた横に滑るのかがわからない 蛇口をどっちに倒したり捻れば水が出るのか、温水/冷水の切り替えはどうすればいいのかわからない オフィスの入り口にある電源スイッチのどれを押せばどこの電気が点灯するのかわからない リモコンでプロジェクターに投影されているスライドの進行をしたいのだけど、間違ってバックしたり変なメニューが表示されたりする これは全てそのような誤りをしたユーザが悪いのではありません。デザインが悪いのです。受け売りですが。。 一つ前のブログに書いたように、ビジネスや問題解決の文脈におけるデザインの可能性について書籍などをあたりながら考えを深めています。その一環で読んだのがD.A.ノーマンの『誰のためのデザイン？ 認知科学者のデザイン原論』です。1990年ごろの古い作品ですが
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
もし新人女子営業が『UXデザイン入門』を読んだら