DesignDevelop
デザインを開発すると言う視点でお伝えするクリエイティブBLOG
人気記事一覧
記事名 |
 |
 |
 |
|---|---|---|---|
CSS3 Flexbox UIパターン集「Flexbox Patterns」(2016/06/06)CSS3で利用できるようになったFlexbox。WEBアプリやレスポンシブを想定して開発されたものですが、まだまだ現場ではそれほど普及していないのが現状です。今日紹介するのはそんなFlexboxを理解・利用するための様々なUIを簡単に利用できるCSSのFlexbox UIパターン集「Flexbox Patterns」です。 「Flexbox Patterns」は利用しやすくなるようにそれぞれのユーザーインターフェイス毎に、簡単な解説と、CSSとHTMLがセットでコピーできるようになっており、コピー＆ペーストで利用できるようになっています。 詳しくは以下 上記のようにCSSとHTMLがコピーできる形でまとめられているため、技術者でなくてもパーツだけなら簡単に組み込むことが可能です。 現在は実用的なものから、なかなかニッチなものまで全部で10のユーザーインターフェイスが登録されています。 |
83 | 45 | 83 |
手書きのワイヤーフレームからHTMLに自動変換してくれるMicrosoft「Sketch 2 Code」(2018/09/02)WEBを制作する際のフローとして、まずは手書きでワイヤーフレームを設計してそれらを固めてから、実制作に移るという方は多いのではないでしょうか？今日紹介するのは、手書きのワイヤーフレームからHTMLに自動変換してくれるMicrosoft「Sketch 2 Code」です。 こちらは、2018年8月に公開されたもので、現在はailab/Sketch2Code at master · Microsoft/ailab · GitHubにて公開されています。開発者インタビューや実際の利用シーンがまとめられた動画が公開されていましたので以下からご覧ください。 動画は以下から ユーザーが手書きのワイヤーフレームをアップデートすると、画像識別と文字認識サービスを併用し、生成してくれるというもの。WEB制作にもAiの影響範囲が、どんどんと広がってきていますが、手書きの段階でブラウザで簡単にUI/UXを |
49 | 493 | 49 |
ログインをもっと快適に オープンソースのログインフォーム10選「10 Open Source Login Pages Built With HTML5 & CSS」(2018/03/06)会員登録ページや管理画面へのアクセスに使用するログインページ。シンプルなものが一般的ですが、こだわりを見せることでサイトのクオリティは高まります。今回はそんな時に参考にしたい、オープンソースのログインフォーム10選「10 Open Source Login Pages Built With HTML5 & CSS」を紹介したいと思います。 Sign in 10種類の、それぞれ個性をもったログインフォームがピックアップされています。 詳しくは以下 Login Form ログインフィールドにドロップシャドウがかかった、フォームやボタンのエッジが丸い、柔らかい印象のフォーム。フラットテイストなトレンド感を感じさせるデザインですね。 Login Page UI 背景のダークなグラデーションカラーが特徴的。シックで印象的なフォームに仕上げたい時に使用したいですね。 Fake Lo |
45 | 5 | 45 |
ワイヤーフレームづくりに便利なキット40「40 Free Wireframe Templates for Mobile App, Web and UX Design」(2016/06/14)本制作をする前にワイヤーフレームで制作して、UIやUXなどをクライアントと確認するというのはWEB業界では慣習的になっていますが、今回紹介するのは、そんなワイヤーフレームづくりに便利なキットを集めたエントリー「40 Free Wireframe Templates for Mobile App, Web and UX Design」です。 Carbon Material Design eCommerce Wireframe Kit (PSD & Sketch) WEBからiOS、AppleWatchまで様々なタイプのワイヤーフレームが紹介されています。今日はその中から特に気になったワイヤーフレームをピックアップして紹介したいと思います。 詳しくは以下 iOS Simple Wireframe Kit (Sketch) Apple Watch Wireframe Kit |
42 | 85 | 42 |
プレビューで簡単！CSSアニメーションがブラウザ上で作れる「animista」(2017/04/01)Webデザインを彩るCSSアニメーション。実装時にはデザインのイメージに合わせて、細かな調整を加えたり、なかなかに手間がかかる箇所でもあります。そんな手間がかかる調整工程を省ける、ブラウザ上でアニメーションが作れるツール「animista」を今回は紹介したいと思います。 ブラウザ上でプレビューしながら細かな動きを調整して、タグをコピペするだけでCSSアニメーションが実装できる便利なツールです。 詳しくは以下 拡大や縮小、スウィングなどの18種類ものアニメーションの雛形から、オプションで数値を変更してアニメーションを細かにカスタマイズすることができます。オプションではアニメーションのスピードだけでなく、ディレイや回転回数など、細かな場所まで弄ることが可能。面倒だった細かな調整作業を、ブラウザ上でプレビューを見ながらできるので、効率的に仕事をこなすことができます。スムーズなアニメーション |
42 | 52 | 42 |
【商用可】国が用意した、日本観光促進のためのハイクオリティのフリー素材「PHOTO METI」(2016/09/19)制作する上で、購入することも多い写真素材。魅力を伝えるためには非常に重要な要素の一つですが、今回紹介するのは、国が用意した、日本観光促進のためのハイクオリティのフリー素材「PHOTO METI」です。 このサイトでは、美しい日本の情景がスライドショーで再生され、掲載されている写真はすべて、日本の観光促進のために利用できるフリー素材となっています。 詳しくは以下 写真は都道府県別にカテゴライズされており、どの写真も非常にクオリティが高く、美しく引き込まれるものとなっています。これらが条件があるとは言え、商用利用も含めて利用できるのは観光や地域のためのデザインには非常に有益なプロジェクトだと思います。 写真素材は、クリエイティブ・コモンズ・ライセンス【表示4.0 国際】の利用条件に基づき公開されており、その範疇と利用規約を遵守すれば商用利用も可能となっています。美しい日本の情景を利用した |
34 | 186 | 34 |
デザインのクオリティを上げるシンプルな背景パターン「 75 Seamless Photoshop Pixel Patterns」(2016/09/04)デザインの細部は宿ると言われており、細かな部分が全体なクオリティに繋がってくるものですが、WEBデザインも同様に細かな背景やパーツを作り込むことでクオリティが上がってきます。今日紹介するのはデザインのクオリティを上げるシンプルな背景パターン「75 Seamless Photoshop Pixel Patterns」です。 非常にシンプルですが、基本的にはシンプルですが中には少し遊びのあるピクセルパターンが全部で75種類まとめられています。 詳しくは以下 非常に利用しやすそうなパターンファイル。シンプルなだけに汎用性がかなりありそうで制作の現場でも活躍してくれそうです。 配布ファイルはPhotoshopのパターンファイルとなっており、基本的にはphotoshopが入っていればダブルクリックすれば登録されるようになっています。もう少しだけデザインに質感を持たせたいという方は是非どうぞ。 |
32 | 53 | 32 |
クリエイティブな管理画面のためのインスピレーション集「20 Inspirational Dashboard Designs」(2017/01/23)CMSなどのシステムの管理やユーザーが自らの情報を操作・管理を行う、管理画面/ダッシュボード。基本的にフロントでは表示されないため、デザインに拘らない場合も多いのですが、今日紹介するのクリエイティブな管理画面のためのインスピレーション集「20 Inspirational Dashboard Designs」です。 iPad Dashboard 管理画面/ダッシュボードのデザイン事例が全部で20集められています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。 詳しくは以下 Story Book シンプルでクリアなダッシュボード Dashboard Web App UI: Job Summary データが見やすく整理されているスタンダードでクリエイティブなダッシュボード Xonom Admin Dashboard かなり攻めているグリッドタイプのダッシ |
31 | 31 | 31 |
タイポグラフィの用語が学べる「TYPETERMS」(2016/06/17)セリフやストローク、ステムなど、タイポグラフィにはその文字の一部分を表す用語があり、デザイナーであればある程度耳にしたことがあると思いますが、今回紹介するのはタイポグラフィの用語が学べる「TYPETERMS」です。 アクセスすると一つの文字が描画されており、その文字の中の一部をどのように呼ぶのかなどが一望できるようになっています。 詳しくは以下 それぞれの部分についてはクリックできるようになっており、その説明を見ることができます。意外とデザイン業界にいても知らない単語があったりここの部分はこういう呼び方をするんだなど発見がありました。もちろん言葉は相手も知っていることが前提で、伝わらなければ意味がないとは思いますが、なんとなく理解していた部分などが詳しく解説されているのは良いですね。 また「TYPETERMS」は埋め込むことが可能とのことで、下記に埋め込んでみました。書体についてタイ |
29 | 18 | 29 |
100種の無料HTML / CSSテーマがまとめられた「Best of 2016: 100 Free HTML/CSS Themes」(2017/03/24)プログラムを組むと一言で言っても、内容は幅広く、多くの知識と技術が必要不可欠です。そんな中今回紹介するのは、時間短縮できる無料のツールをまとめた「Best of 2016: 100 Free HTML/CSS Themes」です。 GitHub – BlackrockDigital/startbootstrap-new-age: A web app landing page theme created by Start Bootstrap できるだけ短時間でウェブサイト制作が必要とされる場合や、手順のかかるプログラムを素早くこなしたい時に役立つツールが、数多く紹介されていますのでご覧ください。 詳しくは以下 Creative – One Page Bootstrap Theme – Start Bootstrap サイトを新たに立ち上げたい時に必要 |
29 | 15 | 29 |
