はてなブックマーク

• あとで読む

  タイポグラフィ・カラー・レイアウト・・デザインをこれから学びたい初心者の方に、デザインの基礎の全体像が掴める動画を紹介 |　バニデザノート

  4 users

  vanidesign.blog.fc2.com

  デザインは、フォントや、色、レイアウト、空間を使って構成を行っていくわけですが、最初はどこから学んだら良いかわからないかと思います。 自分の好きなデザインを見つけて真似してみたり、収集して自分の好みを知ったり、研究することも大切です。 けれど、本格的に勉強しようとした時に、自分がどの部分を集中的に学びたいか、次に何について学ぶ必要があるのかといった目標を立てる時に役立ちそうな動画を紹介します。英語ではあるのですが、とっても分かりやすいので、デザインに興味を持ち、学びたいと考えている方にオススメです。

  • 学び
  • 2018/06/20 08:47

  • あとで読む
  • webdesign
  • デザイン
  • design
  • YouTube
• あとで読む

  いまさら聞けない？グリッド・システムでのデザインの基礎 |　バニデザノート

  8 users

  vanidesign.blog.fc2.com

  続きを読みたい方は、noteにてご購入おねがいします。 //// ▼ばにのUdemyのウェブ制作講座「Photoshopでプロになる！オシャレ＆クールなウェブデザイン講座」でも、グリッドシステムを使用してPhotoshopウェブデザインを進めています。 関連記事 【note】Web,ios,Android等で無料で使える！クリーンな汎用オープンソースアイコンセット３種 2018/09/13 タイポグラフィ・カラー・レイアウト・・デザインをこれから学びたい初心者の方に、デザインの基礎の全体像が掴める動画を紹介 2018/06/19 UIデザインに使用できる、クールで美しいグラデーション配色セットをダウンロードできるサイトを紹介 2018/06/11 いまさら聞けない？グリッド・システムでのデザインの基礎 2018/03/09 Illustratorでアセット書き出しした際に、マスクした部分が

  • テクノロジー
  • 2018/03/09 18:52

  • グリッド
  • デザイン
  • webdesign
  • web制作
  • webデザイン
  • design
  • Web
  • まとめ
• あとで読む

  アートブラシで描いたような手書き風文字をイラストレーターで表現するチュートリアル |　バニデザノート

  15 users

  vanidesign.blog.fc2.com

  アートブラシや筆ペンで描く今風のカリグラフィーをイラレでずっと描きたいと思っていまして。イラレの線幅ツール（CC3以降？）である程度表現することが出来そうなので、手順を書いてみます。 ※たぶん中〜上級者向け。ある程度イラレがわかる人じゃないとついてこれないかもです。

  • 学び
  • 2016/07/18 20:39

  • Illustrator
• あとで読む

  Macでスクリーンショット管理するときに使っている便利なアプリ |　バニデザノート

  37 users

  vanidesign.blog.fc2.com

  Macでスクリーンショットを管理するときに使っている便利なアプリを紹介します。ブログとか、原稿書いたりするときに使ってます。 Mac標準の「グラブ」アプリや、[⌘＋Shift+4]のスクリーンショットでもいいのですが、タイマーがない！そして、デスクトップが映るのがNGな場合に。タイマー機能や、デスクトップを隠す機能、保存先フォルダの設定、自動ファイル名設定に重宝しています。メニューバー常駐型。 Mac用スクリーンショット SimpleCap

  • テクノロジー
  • 2016/04/16 17:07

  • mac
  • 拡張機能
  • あとで読む
  • アプリ
  • Plugin
• あとで読む

  無料ホームページ作成サービス「WiX」を触ってみた |　バニデザノート

  5 users

  vanidesign.blog.fc2.com

  wixは無料ホームページ作成サービス。名前は知っていましたが、はじめて触ってみました。 今回はその感想と、コツっぽいところを書いてみたいと思います。 ログインすると、どんなサイトをつくりたいかのカテゴリーを聞かれます。 ここで、方向性を決めて「次へ」をクリックするとおすすめのテンプレートが表示されます。 わたしは、全体が見たかったので「すべてのテンプレートを表示するにはこちら」をクリック。 こんな感じで、ここからもカテゴリーから選択することも可能になっています。 「表示」クリックでサンプル表示、「編集」でテンプレート編集画面になります。 ここで、作業を終了させると何も保存されないまま終わります。 日本でよく見かけるサーバー型CMSだと、 [登録]→[URL発行]→[テンプレ編集] というような進み方をしますが WiXの場合は [登録]→[編集]→[保存]→[公開] という手順を取っているよ

  • テクノロジー
  • 2016/04/04 13:44

  • webサービス
• あとで読む

  WP REST API v2 でデータを取得して新着情報をjqueryで表示する方法 |　バニデザノート

  6 users

  vanidesign.blog.fc2.com

  ▼html <!-- ここにデータが出力される --> <div class="data"></div> ▼js <!-- jsonデータ読み込み --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> $(function(){ $.ajax({ type: 'GET', url: '★WPのアドレス★/wp-json/wp/v2/posts', dataType: 'json' }).done(function(json){ var len = json.length; for(var i=0; i < len; i++){ var title = json[i].title.rendered;

  • テクノロジー
  • 2016/03/28 00:49

  • wordpress
• あとで読む

  レスポンシブデザインを確認するときにChrome Canaryの「Toggle device mode」が便利でした |　バニデザノート

  8 users

  vanidesign.blog.fc2.com

  Home > ユーティリティ > レスポンシブデザインを確認するときにChrome Canaryの「Toggle device mode」が便利でした

  • テクノロジー
  • 2016/02/08 14:37

  • Web制作
  • chrome
• あとで読む

  Illustratorでつくるシンプルですこし複雑なカタチは分割で考える |　バニデザノート

  7 users

  vanidesign.blog.fc2.com

  Adobe Illustratorで、シンプルだけどすこしだけ複雑な形をつくる考え方です。 基本は、縦や横に割って、繰り返すということだけ。楽しいですよー。 実際の作業をアニメーションgifにしてみましたので、感じを掴んでいただければ嬉しいです。

  • テクノロジー
  • 2016/01/05 21:39

  • あとで読む
• あとで読む

  スマホアプリのUIデザインを研究するときに便利なフリーのSketchデータいろいろ |　バニデザノート

  12 users

  vanidesign.blog.fc2.com

  スマホアプリのUIを研究したいときに便利なフリーSketchファイルを紹介します。 空間の扱いなど、勉強になるところがきっとあるはず。

  • テクノロジー
  • 2015/12/30 19:40

  • sketch
  • ui
• あとで読む

  PhotoshopとIllustratorとSketchを上手に使っていこう |　バニデザノート

  50 users

  vanidesign.blog.fc2.com

  PhotoshopとIllustratorとSketchが最近のウェブデザインツールとして上がってますね。 お客様のニーズに合わせて、いつもはデザインしないアプリをベースアプリとして デザインを要求されることもあるかとおもいます。 今回は、「だいたい同じことができる、でも得意不得意はあるかも」といったことをアプリをまたいで考えてみました。

  • 暮らし
  • 2015/12/03 07:16

  • sketch
  • illustrator
  • photoshop
  • webデザイン
  • web制作
  • デザイン
  • あとで読む
  • ソフトウェア
  • ツール
  • アプリ
• あとで読む

  ウェブデザインの文章レイアウト組みパターンを展開してみる |　バニデザノート

  240 users

  vanidesign.blog.fc2.com

  ウェブデザインの中の、バナーやサイドメニューを抜いた、文章のレイアウトパターンを展開してみました。基本はだいたいこんな感じだとおもうので、配置に困ったら試してみてください。

  • テクノロジー
  • 2015/11/15 23:18

  • webデザイン
  • レイアウト
  • 文章
  • web制作
  • パターン
  • ui
  • デザイン
  • あとで読む
  • ウェブデザイン
  • 勉強
• あとで読む

  最近また注目を浴びているようなのでクラウドソーシングサービスいろいろ。2015年版 |　バニデザノート

  14 users

  vanidesign.blog.fc2.com

  クラウドソーシングサービスの記事をよく見かけるようになりました。 「全受注をクラウドから請けてますー」というニューエイジな方も居るようで。 だれでも、家にいながら、仕事ができる。 という夢を見せてくれるクラウドソーシングサービスを調べてみました。 言わずと知れた老舗のランサーズ。ウェブ関係の依頼はクライアント様直の案件がおおい印象。時々やばい案件はまだみかけるけど、前よりずっとやりやすくなったような印象です。 特にロゴ関連の案件が人気なのかなぁとおもいます。 認定ランサーだけですが、補償サービスというのが魅力的。万が一のときに、うしろに誰か居るっていいなぁとぼんやり思います。そうならないようにもちろん頑張らないとですが！ ランサーズ http://www.lancers.jp/ キャッチコピーの「新しい未来」っていいなぁ・・。 ウェブ関連では、直案件より、ウェブ制作会社さん（プロ側）からの

  • 暮らし
  • 2015/11/11 00:52

  • クラウド
  • 仕事
  • あとで読む
• あとで読む

  愛され♡「メリハリ」ウェブデザインを作る！注目を集めたいときのデザインテクニック |　バニデザノート

  38 users

  vanidesign.blog.fc2.com

  デザインの本質とはちょっと違うのですが、ウェブデザイナーに必要な技術のひとつ、広告などに使う「目立つ・理解されやすいウェブデザイン」の手法をまとめてみました。 メリハリをつけて、目に留めてもらえるようなデザインを目指しましょう！ （すみません、タイトルふざけました、中身はいつもどおりマジメです。）

  • テクノロジー
  • 2015/10/30 19:44

  • Webデザイン
  • デザイン
  • WEB
  • feedly
  • あとで読む
• あとで読む

  photoshopのアートボード機能でレスポンシブも、デザインパターンも一気に書き出し。 |　バニデザノート

  10 users

  vanidesign.blog.fc2.com

  photoshopのアートボード機能を使えば、 sketchみたいにカンプを複数並べてデザインができます。 レスポンシブデザインはもちろんですが、PC/スマホサイトの各カンプをデザインしたり複数サイズのバナーパターンを同時に編集したりと結構使えたので、ご紹介。 ※アートボード機能は、Adobe Photoshop CC 2015 から利用できます。 [ファイル]→[新規...]で新規ファイル作成画面を開き 「ドキュメントの種類」から、「アートボード」を選択します。 さらに、「アートボードの設定」から、最初に作るアートボードのサイズを設定します。 あとでアートボードのサイズを自由に変更できるので、欲しいサイズがない場合は近いものを選んでおいても大丈夫です。

  • テクノロジー
  • 2015/10/10 16:47

  • photoshop
• あとで読む

  ちゃんとしたサイトがGoogleさんで正しく検索してもらえるようなSEO対策 |　バニデザノート

  48 users

  vanidesign.blog.fc2.com

  サイトを作ったけど、思ったように見てもらえてない、アクセス数が伸びない。googleさんで検索しても、３P以降にも出てこない。そんな初期状態のウェブサイトで、最初にやるといいSEO対策をご紹介します。 ※「超競合キーワードで１P目の１番になりたいんだ！！絶対にその順位も落としたくない！毎日みちゃうよー」って人には向いてないとおもいます。

  • テクノロジー
  • 2015/09/25 14:19

  • seo
  • コーディング
  • HTML
  • web制作
  • *web制作
  • *まとめ
  • あとで読む
• あとで読む

  メルマガ配信に使えそうなおしゃれなメールテンプレート配布サイト |　バニデザノート

  6 users

  vanidesign.blog.fc2.com

  スマホで見れるレスポンシブなものから、retina対応で見た目が綺麗にできそうなものまで 無料でダウンロードして使えるメールマガジン（ニュースレター）のテンプレートを配布しているサイトを紹介します。

  • 学び
  • 2015/09/24 10:56

  • メルマガ
  • テンプレート
• あとで読む

  レスポンシブで横幅いっぱいに表示できるjqueryカルーセルいろいろ |　バニデザノート

  55 users

  vanidesign.blog.fc2.com

  ウェブサイトのTOPページのアイキャッチエリアで横幅いっぱいに大きな写真がスライドするようなあの動きを実現できるjqueryプラグインをいくつか紹介してみます。 トップページを見るとCSS3なダイナミックなものになっていますが、平面的なものも作れるみたいです。 軽量でフレキシブルなのが売りのようです。 横幅いっぱいに画像を引き延ばすこともできますが、左右に前のスライドを残すタイプのものも得意そうです。 Glide.js ドキュメント / ダウンロード

  • テクノロジー
  • 2015/09/21 23:23

  • カルーセル
  • jQuery
  • スライド
  • jQueryプラグイン
  • Slider
  • Responsive
  • Carousel
  • レスポンシブ
  • CSS3
• あとで読む

  シンプルで軽そうで面白そうなフリーCMSを詰め合わせ |　バニデザノート

  8 users

  vanidesign.blog.fc2.com

  CMSといえば、WPをはじめ、MTとかconcrete5など、フルスペックのものとして有名どころですが、独自の機能に特化していたり、シンプルを極めていたり、納品可能なレベルかは置いておいてちょっと面白そうなCMSをご紹介。 未検証なものも含みますので、検証してからのご利用をおすすめします。 php+cakephp。MySQL 4〜、日本製 ブロックごとに分けてD&Dで移動、編集が可能なCMS。 ページ追加、ブログ管理、スマホ対応、メールフォームの編集性が強みのようです。 操作はconcrete5っぽい感じです。 Baked http://bakedcms.org/ デモ / ダウンロード PHP、SQLite？ WordPressよりずっと速く、MVCなど余計なことをせずにファイルにアクセスして、高速にサクサクしたCMSを作るプロジェクトっぽい印象を受けました。 コンテンツベースのCMSと

  • テクノロジー
  • 2015/09/14 12:42

  • あとで読む
• あとで読む

  レスポンシブデザインのプレビューをするために、ブラウザの最小幅を知っておこう |　バニデザノート

  5 users

  vanidesign.blog.fc2.com

  レスポンシブでぐりぐり動かしたいときに、ブラウザの最小幅って実はすごく大事で。最小幅がスマホ幅より広いと（というか、0 > スマホ最小幅 > ブラウザの最小幅になったとき）、納品前に二度手間になることも・・！ もちろん各幅をエミュレーターで確認するのも大事なのですが、中間の動きも見られるのがレスポンシブなのですよね。調べたところブラウザのバージョンによってサイズが前後してるみたいですので、現時点で私の環境で主要ブラウザの状況を調べました。

  • テクノロジー
  • 2015/09/11 00:03

  • WEB制作
  • feedly
  • web
• あとで読む

  Sketch.app 用の素材サイトが素敵です。（無料あり） |　バニデザノート

  5 users

  vanidesign.blog.fc2.com

  Sketch.appの素材サイト「Sketch App Sources」がいい感じです。いかにもーなクリーンでフラットなUIがメインですが、そういうデザインの参考になったり、使ったりできるものもあるかとおもいます。 サイト全体では、有料のと無料のものが混ざっていますが、ご紹介するのはフリーでダウンロードできるものです。

  • テクノロジー
  • 2015/09/09 19:11

  • Sketch
  • 素材
  • サイト
  • 無料
• あとで読む

  Atomのみでgit管理するときに便利なパッケージ |　バニデザノート

  3 users

  vanidesign.blog.fc2.com

  git-control は、gitコマンドを使わずにコミットできるGUIっぽいコントロールパネル。 デフォルトショートカットは　ctrl-alt-o , ctrl-alt-c。

  • テクノロジー
  • 2015/08/26 23:24
• あとで読む

  SVG, TTF, OTF, PNG, GIF のアイコンファイルを一括管理する無料OSXアプリ「iconjar」 |　バニデザノート

  4 users

  vanidesign.blog.fc2.com

  今までのストックを全部タグ付け、ファイル名の割り当てをしていくと大変な作業になるので よく使うものからストックしていく感じで すばやく使えるようにbootさせていくのがいいように思いました。 毎度イラレやフォトショを横切る必要がなくなっていくのではないかとおもいます。 あと、Webフォント系アイコンのOTF,TTF形式のものが読み込めるので、リスト化するのに便利そう。 インポートとインデックス化さえしてしまえば すばやくドラッグ＆ドロップでPhotoshop,illustrator,Sketchへ読み込めます。 ご参考にどうぞ。 「iconjar」 http://geticonjar.com/

  • テクノロジー
  • 2015/08/24 08:37

  • Mac
• あとで読む

  既存のhtmlを使ってWordPressテーマ化する時の必要最低限の手順 |　バニデザノート

  89 users

  vanidesign.blog.fc2.com

  HTMLファイルのほうが多くを占めるサイトの場合、「既存のテーマファイルをカスタマイズするより、htmlファイルをベースに構築したほうが早いかも」、と思うことがあり、最低限どこを直していけばいいかを書いてみたいとおもいます。 テーマの基準となる.htmlファイルを /WPの置かれているフォルダ/wp-content/themes/new_theme 内にコピーします。ファイル名は、index.php に変更。 「new_theme」は、好きなテーマファイル名でOKです。 css、js、画像フォルダは、既存のhtml郡の中に置いたままでもいいですし /new_theme内に複製コピーしてもOKです。 各ファイルパスだけ、相対パスだとWPのパーマリンク設定によってはうまく動かないことがあるので WPのテーマフォルダと違うところにある場合は絶対パスで http://xxxx.com/css/cs

  • テクノロジー
  • 2015/08/17 16:59

  • wordpress
  • チュートリアル
  • テーマ
  • html
  • あとで読む
  • CSS
• あとで読む

  要素をタイル状に並べる軽量プラグイン「Freetile.js」 |　バニデザノート

  40 users

  vanidesign.blog.fc2.com

  基本は呼び出すだけ。 $('#container').freetile(); この場合は#container内にタイルする要素が入っているイメージです。 アニメーションとディレイ設定(ms)： $('#container').freetile({ animate: true, elementDelay: 30 }); カスタムエレメント（タイルするエレメントを指定する場合） $('#container').freetile({ selector: 'customSelector' });

  • テクノロジー
  • 2015/08/10 14:30

  • masonry
  • javascript
  • js
  • アニメーション
  • design
  • bookmark
  • プラグイン
  • web制作
  • Webデザイン
• あとで読む

  最低限これだけ覚えればemmetの恩恵にあずかれるかもな考え方のヒント |　バニデザノート

  41 users

  vanidesign.blog.fc2.com

  Emmet（旧 zen coding）を、できるだけ覚えずに入門するための、考え方を紹介します。 zen codingのときに私は一回挫折というか、面倒だなとおもって放置していた方で なんで面倒と思ったかというと、速さに気を取られて一文で（何行ものHTMLを一発で＝爆速を再現するため）長い呪文のような命令文をみて「あーだめだ」って思ったんですよね。 そのあたりも踏まえて、爆速にはならないかもしれないけど、短い文で面倒なコーディングを少しだけ楽にする基本を書いてみたいとおもいます。 Emmetは、gitのようにサーバーとつないだり、Sassのようにコンパイルの設定が不要です。 必要なのは、使っているエディタにemmetのプラグインをインストールするだけ。 Atomだと、Emmet plugin Atom editorとか、sublime text だとこのあたりの記事が役に立つのかな。 （C

  • テクノロジー
  • 2015/08/07 14:36

  • Emmet
  • html
  • Editor
  • あとで読む
• あとで読む

  軽量でシンプルなレスポンシブフレームワーク「Skeleton」 |　バニデザノート

  60 users

  vanidesign.blog.fc2.com

  「Skeleton」は、レスポンシブCSSフレームワークです。「シンプルで、羽根のように軽い」がコンセプトで、基本的なhtmlコンポーネントと、グリッドレイアウトのみが入っています。 モバイルファーストな意識が高く、ファイル自身も少なく軽量なので全体が見渡しやすく扱いやすい印象です。 960gsベースの、グリッドシステムです。HDなPCサイズでのみ横幅を広げるなど、イレギュラーなこともCSSをいじれば可能です。シンプルなコンポーネントのみだからオーバーライドしなくてもできるのが素敵。 <!-- .container is main centered wrapper --> <div class="container"> <!-- columns should be the immediate child of a .row --> <div class="row"> <div class=

  • テクノロジー
  • 2015/07/27 12:55

  • フレームワーク
  • CSS
  • レスポンシブ
  • グリッドレイアウト
  • CSSフレームワーク
  • HTML
  • Web制作
• あとで読む

  スクロールしたらふわっと画像が表示されるjQueryプラグイン「Lazy Load」 |　バニデザノート

  25 users

  vanidesign.blog.fc2.com

  ■js読み込み <script src="jquery.js"></script> <script src="jquery.lazyload.js"></script> ■画像読み込み（srcではなく、 data-originalにurlを入れるのがコツ。） <img class="lazy" data-original="img/example.jpg" width="640" height="480"> ■スクリプトを最後に。 <script> $(function() { $("img.lazy").lazyload(); }); </script>

  • テクノロジー
  • 2015/07/23 18:10

  • jQueryプラグイン
  • lazy
  • プラグイン
  • jQuery
  • 画像
  • あとで読む
• あとで読む

  Sketch3でこれからデザインする人に使い方のヒントになりそうな操作をまとめてみる |　バニデザノート

  180 users

  vanidesign.blog.fc2.com

  Sketch3は、ウェブサイトや、アイコンや、スマホデザインや、レスポンシブデザインなどのデジタルデザインに特化したデザインアプリです。 直感的で、定義をすればするほど速くデザインができるんですが、PsやFwと比べると、シンプルになりすぎてて「あの機能はどこなの？っていうかあるの？」って思うものがいくつかあったので、まとめてみたいとおもいます。

  • テクノロジー
  • 2015/07/20 01:35

  • sketch
  • design
  • mac
  • app
  • webdesign
  • sketch3
  • 設定
  • ボタン
  • あとで読む
  • webデザイン

次のページ