タグ

web designとWeb制作に関するIndigo_blueのブックマーク (55)

  • CSSMENUMAKER.COM

    Get a price in less than 24 hoursFill out the form below. One of our domain experts will have a price to you within 24 business hours.

  • 2014年これからのウェブ制作業界の流れ、伸びる職種、ウェブデザインのトレンドなどのまとめ

    数多くのブログで2014年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。 キーワードとしては、スマフォ・タブレットなどの小さいサイズのタッチデバイス、レスポンシブ(特に画像)、HTML5/CSS3、ビッグデータ、リスク管理が注目されています。 2014年、ウェブ制作業界全体の流れ ウェブデザインの2014年のトレンド 2014年に大きく変化するウェブデザインの7つの傾向 2014年、注目度の高いIT系の職種・役割 2014年、ウェブ制作業界全体の流れ まずは、2012, 2013年と的確な予測をだしてきたsitepointの2014年のウェブ制作業界の全体の流れから。 10 Web Predictions for 2014 スマートフォン中心の年 最終的にはデスクトップからのアクセスをスマフォが超える HTML5のウェブアプリ

  • 必読!5分でわかるレスポンシブWebデザインまとめ 制作編 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    お久しぶりです。デザイナーの野田です。 まず、今回の記事を見ていただく前に、前回と前々回に書かせていただきました。 「必読!5分でわかるレスポンシブWebデザインまとめ」 「必読!5分でわかるレスポンシブWebデザインまとめ Pt.2」 を読んでいただけるとスムーズです。 今回で、【必読!5分でわかるレスポンシブWebデザインまとめ】のシリーズも最後にさせていただきますので、少しコンテンツ量が多くなります。 100% 5分では分らないので、タイトルはスルーしてやってください。 様々なサイトでレスポンシブWebデザインについて紹介されていますが、制作方法が異なっていたり、内容が少し難しいと感じる部分がありました。 この記事は、ディレクターの方やデザイナーの方、どちらにも理解しやすいように書かせていただいてます。 また、これまでレスポンシブWebデザインについてやってきましたが、基的な部分で

    必読!5分でわかるレスポンシブWebデザインまとめ 制作編 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • 今からでも間に合う!レスポンシブWebデザイン作り方のまとめ

    photo by Scolirk 地方でもマルチデバイス対応を求められることが多くなってきました。 徐々に対応しているところが増えてきたためだと思います。 私も昨年からレスポンシブWEBデザインについて、 対応する必要がありましたので、調べたものをまとめてみました。 もくじ レスポンシブWebデザインとは? ギャラリーサイト レスポンシブWebデザインの作り方 画像の切り替え・最適化 レスポンシブ対応のフレームワーク レスポンシブ対応のライブラリ サイトの高速化 レスポンシブWebデザインとは? 2年程前から流行し始めたレスポンシブWebデザイン。 基的な考え方、メリット・デメリットを理解しておかないとトラブルの元になります。 レスポンシブWebデザインの基 レスポンシブWebデザインの基礎 必読!5分でわかる流行のレスポンシブWebデザインまとめ | 株式会社LIG 5分で分かるレス

    今からでも間に合う!レスポンシブWebデザイン作り方のまとめ
  • FINDJOB!終了のお知らせ | FINDJOB!

    FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ

    FINDJOB!終了のお知らせ | FINDJOB!
  • レスポンシブwebデザイン クラス継承で記述を最適化する5つのポイント

    最近、CSSをこう記述していてばいいんじゃないかなって考えまして、また レスポンシブwebデザイン について書かせて頂きます。今回はその記述テクニックで誰にでも簡単に実装出来る方法を5つのポイントに分けまして説明していきたいと思います。 1.CSSの読み込みの順番を理解する CSS記述の優先度 CSSは上から順番に読み込んでいき後に記述されている指定の優先度が高くなります。このルールを利用しましてCSSで定義したクラスを重複しながらデザインを変えていきます。 目次に戻る 2.HTMLを部品化する 部品化するって言うと難しくなっちゃうのですが、ヘッダー、コンテンツ、サイドメニュー、フッダーに切り分けるとレスポンシブwebデザインはもの凄く簡単になります。 なんでかと言いますと切り分けられた部品を表示したり非表示にしたりするのが レスポンシブwebデザイン だからです。 目次に戻る 3.CSS

    レスポンシブwebデザイン クラス継承で記述を最適化する5つのポイント
  • Xlune::Blog

    可変グリッドレイアウトjQueryプラグイン(jquery.vgrid.js) なんだか可変グリッドレイアウトがまた流行ってる(?)ようなので、jQueryプラグイン書いてみた。 一通りブラウザで表示確認ぐらいはしたけど、テストは十分じゃありません。 Demo Demo Index 利用方法はデモのソースを確認してください。(ウィンドウリサイズして動きも確認してね) Download github zip file 利用には、jQuery体とjquery.easingプラグインが必要です。別途読み込んでください。 更新情報 v0.1.8 (20120421) display属性で、グリッド要素の表示/非表示を切り替えれるように修正しました。 demo009を追加 v0.1.7 (20111110) 複数の可変ボックスを指定すると、開始位置がおかしくなるバグを修正しました。 demo008

    Xlune::Blog
  • レスポンシブデザインとリキッドレイアウトの違いと、その方法 | WebriDay

    レスポンシブデザインとリキッドレイアウトの違いと、その方法 レスポンシブデザイン、リキッドレイアウトなど、スマホやタブレットの増加と共に需要が増えていますね。 今更なのはわかっていますが、今一度皆さんも復習してみましょう。 レスポンシブデザイン・・・オブジェクトを%指定などを施し、それぞれの並びは大きく変わらない。 リキッドレイアウト・・・グリッドシステムなどを用いてボックスを並べており、個々のオブジェクトの位置やサイズが大きく変化する。 定義は使う人によって曖昧ですが、上のような解釈で大きな間違いはないかと思われます。 レスポンシブデザインの例 キューピーマヨネーズキッチン キリンシティ PCの方は、ブラウザの幅をいじってみてください。感動ですね。 リキッドレイアウトの例 newsola charary.com レスポンシブデザインの作り方 基的には個々のサイズを%指定し、@media

  • 効率的に学べた!Webデザインを「職種別」に基礎から勉強出来る総まとめ | コムテブログ

    作成:2014/01/6 更新:2014/11/01 Webデザイン > Web制作において、Webデザイナーに関係するものを職種別にまとめました。会社によって分け方は違うと思います。今回は参考サイトとスライドを掲載しています。 エンジニア速報は Twitter の@commteで配信しています。 もくじ アートディレクター 1.アクセシビリティ 2.ユーザビリティ 3.UX(ユーザーエクスペリエンス) 4.IA(情報アーキテクチャ) 5.画面設計(ワイヤーフレーム) 6.進行管理 Webデザイナー 7.レイアウト・フォントの知識 8.配色 9.Illustratorの使い方 10.Photoshopの使い方 11.バナー作成 12.ボタン作成 フロントエンドエンジニア 13.HTML5 14.CSS3/Sass 15.javascript 16.jQuery 17.WordPressテー

    効率的に学べた!Webデザインを「職種別」に基礎から勉強出来る総まとめ | コムテブログ
  • Webデザインのスキルを磨こう!Webサイト模写のススメ

    2014年8月17日 Photoshop, Webデザイン 先日、Webデザイナーになってもうすぐ2年がたつというMさんから、「どうすればデザインのスキルを磨くことができるのか?」という旨のご相談を頂きました。今回は彼女の相談メールでもふれられている、デザインのスキルアップに有効なWebサイトの模写のやり方について掘り下げてみようと思います! ↑私が10年以上利用している会計ソフト! 頂いたご相談メール 実は最近スランプぎみになっていて、サイトデザインを作成してもなぜかダサい、野暮ったいデザインになってしまいます。 デザインスキル向上させるために、いいデザインのサイトを模写するといいときいて模写もしてみたのですが、ぴったり一致するように作るのに意識がいってしまい、あまりデザインスキルが上がったと実感できないでいます。(模写したデザインを自分のオリジナルで活かせない) もし模写するときはどう

    Webデザインのスキルを磨こう!Webサイト模写のススメ
  • S5-Style

    宇都宮勝晃、尾花大輔、菅野友香、久野遥子、中村勇吾がウェブデザインに寄せる思いとは?発想の源も いまやウェブサイトは、私たちの暮らしに欠かせない存在になっています。インターネットの広大な海には無数のサイトが存在し、それらは、ウェブデザイナーやフォトグラファー、イラストレーターたちの手によって構築されています。そういったクリエイターたちの活動を俯瞰し、20年にわたってキュレーションしてきた「S5-Style」。ウェブデザイナーの田渕将吾さんが自身の学習の一貫として始めたそのサイトは、「すべてのクリエイティブに光を当てること」をコンセプトにリニューアルオープンしました。田渕さんは、素晴らしいデザインの集約はもちろん、それらをつくりだすデザイナーやクリエイターが交流できる場を生み出し、デザインの未来に貢献したいと語ります。さまざまなかたちでウェブサイトに携わるクリエイターたちは、何をインスピレー

    S5-Style
  • Tters - 棲み分けしやすい匿名SNS

    Ttersへようこそ! 「Tters(ッターズ)」は、自分に合った〇〇ッターを作成し、フォローして自由につぶやける匿名SNSです。 匿名だからこそ、人間関係のストレスやプレッシャーとは無縁で、自分らしく自然体でありながら自己表現が可能な空間を提供しています。 初めての方は、当サービスの代表的なタイムライン「みんなのッター」にて、思いの丈をつぶやいてみてください。ユーザー登録は必要ありません。 まずは挨拶してみよう この表示は一度つぶやくと消えます。

    Tters - 棲み分けしやすい匿名SNS
  • The Best Designs - The Best Flash and CSS Web Design

    Web Designers Need a Great Wordpress Theme Builder I've been a part of the web design community for years, showcasing some of the best designed websites on the Internet and recognizing their talented designers. Even though the gallery was recently closed, this website has transitioned to showcasing my favorite Wordpress themes provider, Elegant Themes. I felt that this was the best way to utilize

    The Best Designs - The Best Flash and CSS Web Design
  • 2013年に話題になったデザインに関する「考え方」が変わる記事14選

    デザインをしつづけていると、たまに柔軟に考えられなかったり、自分のデザインに対して疑問を感じるときがありませんか? そういうときは一度、初心にかえってデザインに関して考え方を見直したり、インスピレーションを刺激することも大切です。 また、デザイン思考を身につけるためにも、常日頃から考え続けることも重要です。 今回は、過去に話題になり、読むだけでデザインに関する「考え方」が深まる14個の記事をご紹介します。 デザインに対する考え方が変わる・深まる記事 これはウェブページです。 ウェブデザインの質は、言葉です。 ウェブで一番強力な道具は、今も昔も言葉だということを、思い出させてもらいました。 ▷これはウェブページです。 選ばれるウェブデザインとは 9つの基的なルールと感情に訴えるデザインについて詳しく書かれています。 サイトの使いやすさだけでなく「ユーザーがそのサイトにどんな感情を抱くか」

    2013年に話題になったデザインに関する「考え方」が変わる記事14選
  • Coveloping

    box-shadowでふわりとした影をつくるCSSのジェネレーター、レスポンシブのチェック、アスペクト比の計算機、CSS/JSの軽量化など、たくさんの便利な時短ツールがありますが、それらの便利なツールを一つの場所にまとめたCovelopingを紹介します。 FacebookのOPGチェックやGoogle Mapsの地図生成ツールもあり、新しいプロジェクトを始める時にも役立つものが揃っています。 Coveloping 便利ツールは現在23種類、アスペクト比の計算や一つのカラーに黒と白を加えたバリエーションを生成したり、box-shadowでふわりとした影をつけたり、jQueryのアニメーションのエフェクトなどがあります。 これからもどんどん増えていくそうです。 その中から、いくつか紹介します。

  • | シンプルデザインのWelcartテンプレート・テーマ | Welthemes

    世界で最も愛されるCMSであるWordPress。その使いやすさそのままにショッピング機能を追加するプラグインがWelcartです。 Welcartを更に魅力的にするためのシンプルで美しいデザインテーマをどうぞ。 最初からシンプル。商品の写真をしっかり見せることと、使い易いショッピングカート。これだけにフォーカスしたデザインテーマ集です。WordPressを使ったことのある方なら、あと少しの手間で簡単にオンラインストアを構築できます。 新テーマ「SIMPLY」リリース 「SIMPLY」はWelcartデザインテーマで最も人気の高い「minimum」の次世代テーマとして開発されたテーマです。 Welcartの新しい初期テーマ「Welcart Basic」を親テーマとして、デザインを見直し、ヘッダー画像やカラースキームのカスタマイズを強化、そしてウィジェット機能もよりわかりやすくシンプルに利用

  • ScaleOut | Supership

    2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。件に関する詳細は、プレスリリースをご確認ください。 2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。 件に関する詳細は、プレスリリースをご確認ください。

    ScaleOut | Supership
  • ウェブのレイアウトやUIデザインの参考になるPinterestのボードのまとめ

    先日、日語版がローンチしたPinterestから、ウェブのレイアウトやUI/UXデザインの参考になるボードを紹介します。 日語版を利用するのは簡単です。 Pinterestにログインして、idをクリックしアカウント設定を選択します。

  • Ligature Symbols

    HTML & CSS Please copy & paste this code to your HTML file or Stylesheet. <p>Simple use for mailto link.</p> <a href="mailto:mail@example.com" class="lsf">mail</a> <p>Use tha icon with text.</p> <a href="http://twitter.com/" class="lsf-icon" title="twitter">Twitter</a> <p>Use tha icon with unicode.</p> <a href="http://amazon.com/" class="lsf-icon amazon">Amazon</a> /* CSS */ @font-face { font-fami

    Ligature Symbols
  • 意外と多い!? Web フォントに対応していない環境 ~2012 年の Web フォント事情

    Web フォントは「Web サイトにフォントを埋め込む」ための技術です。 先日、Web フォントを使った 絶対にコピペできない文章を作ったったwwww を公開しました。多くの人に楽しんでもらえたのですが、その一方で、Web フォントが適用されなかった方から「コピペできるんだけどどういうこと?」「意味が分からない」というコメントがよせられました。 ほぼすべてのブラウザーが Web フォントに対応しているはずなのですが、一体、何が原因だったのでしょうか。 そこで、Web サーバーのアクセスログを解析して「Web フォントに対応していない環境」がどの程度あったのかを調べてみました。 4種類のフォーマット 一口に Web フォントといっても、フォントのフォーマットは WOFF・TTF・EOT・SVG の 4 種類あります。今後は WOFF フォーマットが標準になっていくのですが、現在ではサポートし

    意外と多い!? Web フォントに対応していない環境 ~2012 年の Web フォント事情