タグ

関連タグで絞り込む (18)

タグの絞り込みを解除

web開発とwebデザインに関するstealthinuのブックマーク (17)

  • 16種類（45カテゴリ）の業界150サイトの調査から分かるスマートフォンサイトUIの現状10選（スライド付）


    2015年5月、スマートフォンによるGoogleの検索数がPCでの検索数を抜いたというニュースがGoogleの公式ブログで発表されました。昨今の私たちは多くの情報をスマートフォンで検索しています。その流れに伴って、現在は多くの企業がスマートフォン用に最適化されたWebサイトを持つようになりました。 我々Web制作者はこの流れの初頭、PCサイト制作で培ったノウハウを元に、手探り状態で制作していたのを記憶していますが、この数年の間で一定の制作ノウハウが蓄積されてきたように思います。 しかしデバイスが多様な進化を遂げる中で、スマートフォンサイトのUI作法も日々刻々と変化し続けています。私たちWeb制作者は一定のノウハウを使い回すことに固執せず、常に新しい動向を自分の目でキャッチして知識を刷新し、日々の業務にフィードバックさせる活動が大切です。 というわけで少々前置きが長くなりましたが、今回は昨今
    16種類（45カテゴリ）の業界150サイトの調査から分かるスマートフォンサイトUIの現状10選（スライド付）

  • Scanstyles does nothing in Webkit/Firefox/Opera と IE11 で表示される


    Internet Explorer 11 を利用していて﹁Scanstyles does nothing in Webkit/Firefox/Opera﹂とダイアログが表示される現象について。 curvycorners という div 要素などを角丸にできる JavaScript ライブラリが、IE11 に対応していないため出てくるメッセージです。バグですね。 IE11 の user agent の変更によりIE判別で間違って、最終的に alert を出す仕様のようです。 神戸市三宮の研修・貸会議施設 – スペースアルファ三宮 | 富士ゼロックス総合教育研究所 が利用していたので気付きました。 互換表示設定により対応 とりあえずメッセージを非表示にするには、Alt キーを押して メニューの﹁ツール﹂から﹁互換性表示設定﹂を選択。対象の URL を追加しましょう。 参考‥ IE 11 の
    Scanstyles does nothing in Webkit/Firefox/Opera と IE11 で表示される
    stealthinu
    stealthinu 2016/07/07
    IE11で「Scanstyles does nothing in Webkit/Firefox」と出てくるエラーはcurvycornersという昔、角丸にするために使われてたライブラリがIE11対応してないために出る模様。とほほ。
    リンク

  • UX課題を”つくる前”に改善！インド発の無料プロトタイピングツールが、人間の仕事を本気で奪いにきてる | Ledge.ai


    TOP > Technology > 注目テクノロジー > UX課題を”つくる前”に改善！インド発の無料プロトタイピングツールが、人間の仕事を本気で奪いにきてる こんばんは、イイノです。 つい先日にはAdobeXdのプレビュー版がリリース。プロトタイプが本格的に現場に浸透するぞー！なんて、話題になってますが、個人的にはXdを超える？なんて思えるプロトタイピングツールを発見してしまったので、紹介してみようかなと。 これまでのプロトタイピングツールでは難しかった﹃複数人プロトタイピングでの挙動をトラッキング分析﹄や、﹃個別＆全体での行動をレポーティング﹄といった機能を搭載し、なんと無料で利用可能にしてしまったという衝撃のツール﹃CanvasFlip﹄。 インドの天才たちが作ってくれたこのツールで、プロトタイピングとユーザーテストの手順や手間やコスト、その他もろもろな常識が変わってしまう？…かも
    UX課題を”つくる前”に改善！インド発の無料プロトタイピングツールが、人間の仕事を本気で奪いにきてる | Ledge.ai
    stealthinu
    stealthinu 2016/04/28
    デザイン画像とそれをつなぐリンク先設定するだけで実際に動くプロトタイプとして確認できてレポート化までしてくれる。
    リンク

  • サービス終了のお知らせ


    平素より﹁PHPプロ！﹂をご愛顧いただき、誠にありがとうございます。 2006年より運営してまいりました﹁PHPプロ！﹂ですが、サービスの利用状況を鑑みまして、2018年9月25日︵火曜日︶をもちましてサービスを終了させていただくことになりました。 サービス終了に伴いまして、2018年8月28日︵火曜日︶を持ちまして、新規会員登録ならびにQ&A掲示板への新たな質問、回答の投稿を停止させていただきます。 なお、ご登録いただいた皆様の個人情報につきましては、サービス終了後、弊社が責任をもって消去いたします。 これまで多くの皆様にご利用をいただきまして、誠にありがとうございました。 サービス終了に伴い、皆様にはご不便をおかけいたしますこと、心よりお詫び申し上げます。 本件に関するお問い合わせはこちらよりお願いいたします。
    stealthinu
    stealthinu 2016/03/10
    いまさら携帯向けのコンテンツも作らないといけなくて携帯での文字コードやCSSについて参考に。こういう情報はどんどん失われていくので困る。
    リンク

  • モバイルサイトの3キャリア共通CSSと最新コーディング事情 : LINE Corporation ディレクターブログ


    こんにちは、﹁livedoor Blog﹂を担当している吉沢です。 スマホの登場で、すっかりケータイ (フィーチャーフォン/ケータイ/ガラケー) が日陰に追いやられた感がありますが、ケータイも毎年進化していて、モバイルサイトの開発が行いやすいケータイがユーザへ浸透してきています。 livedoor Blogでは、スマートフォン分野に注力しながら、月間15億PVあるケータイ版のUI最適化にも引き続き取り組んでいます。今回は、livedoor Blogで採用した事例を元に、この先1〜2年のケータイ開発・運用に役立てられる、3キャリア共通の CSS から最新のコーディング事情を紹介したいと思います。 アクセスシェア〜ライブドアの場合 まずはどの世代のケータイをメインに開発して表示くずれを起こさないようにするか検討するため、アクセスシェアを把握します。1年前と比べると、iモードブラウザ2.
    モバイルサイトの3キャリア共通CSSと最新コーディング事情 : LINE Corporation ディレクターブログ
    stealthinu
    stealthinu 2016/03/10
    いまさら携帯向けのコンテンツも作らないといけなくて携帯でのHTMLやCSSの対応状況を確認していて大変に参考になった。
    リンク

  • 自然と共に。長野�県でイケてる仕事をしてるWeb制作会社まとめ12選


    こんにちは！ 株式会社LIG 長野チームライターのっち︵@nocci_84︶です♩ わたしは新しい場所に足を運ぶのが好きなのですが、さまざまな場所に出向いていると、名刺やフライヤーなど長野県のクリエイティブに触れる機会が自然と多くなります。 今回は、そんなクリエイティブで地域を支える、長野県のイケてるWeb制作会社をまとめてみました！ 株式会社LIGって？ 2007年設立、東京都台東区発のWeb制作会社。年間150のWeb制作・サイトリニューアル実績をもち、毎年複数のWebデザインアワードを受賞している。 月間200万PVのWebメディア﹁LIGブログ﹂で培ったマーケティングのノウハウを生かした企画力、複数の海外拠点を生かしたシステム開発力も強み。長野ではありませんが、全国オンライン対応も可能です。お気軽にご相談ください！ 👉Web制作の実績詳細 2024年1月に最新情報へと更新 長野県
    自然と共に。長野�県でイケてる仕事をしてるWeb制作会社まとめ12選
    stealthinu
    stealthinu 2015/11/06
    長野のWebデザインやってる会社まとめ
    リンク

  • 「デザインがかっこよすぎて80％が離脱」サイバーエージェントのお料理日記アプリ「ペコリ」がハマった意外な落とし穴。


    ﹁デザインがかっこよすぎて80％が離脱﹂サイバーエージェントのお料理日記アプリ﹁ペコリ﹂がハマった意外な落とし穴。 サイバーエージェントさんのお料理コミュニティアプリ﹁ペコリ﹂についてプロデューサーの野口さんにお話を伺いました。 ※株式会社サイバーエージェント﹁ペコリ﹂プロデューサー野口さくらさん。 ﹁ペコリ﹂をつくった理由。 ﹁ペコリ﹂について教えてください。 野口‥ ペコリは手作り料理に特化した﹁お料理コミュニティアプリ﹂です。約2年前にリリースして20人ほどで運営しています。︵プランナーが2人で、残りはエンジニアとデザイナー︶ アプリは約70万ダウンロードで、WEBもあわせると月間200-250万人の利用者が使ってくれています。ユーザーとしては90%以上が女性で、20-40代の料理好きな主婦がほとんどですね。 アプリはiOSとAndroidだとどちらが多いでしょうか？ 野口‥ iOS
    「デザインがかっこよすぎて80％が離脱」サイバーエージェントのお料理日記アプリ「ペコリ」がハマった意外な落とし穴。
    stealthinu
    stealthinu 2014/10/29
    その当時の最新流行のデザインを追ってもターゲットユーザーがそれを好むとは限らないというのはしっかりと自覚しておきたい。
    リンク

  • white-space プロパティ(空白文字及び折返しの取扱) - CSS リファレンス


    平成27年12月15日現在の定義です。 プロパティの定義 空白文字及び折返しの取扱。 定義のある水準 第一水準 (CSS1) 以降。 第三水準以降はテキストモジュールで。 WAP 2.0 での定義 必須プロパティ。 但し、KDDI/沖縄セルラー端末等では nowrap 値のみ実装。 対象メディア 視覚系メディア。 対象要素 全要素。 上位要素からの値の継承 あり。 第二水準でのプロパティ値 以下のいずれか‥ inherit 上位から継承。normal半角空白文字等は一つに纏める 行端で適宜折返しをする nowrap 半角空白文字等は一つに纏める 行端で折返しはしない pre 半角空白文字等はそのまま扱う 行端で折返しはしない pre-wrap 半角空白文字等はそのまま扱う 行端で適宜折返しをする pre-line 半角空白文字は一つに纏める 行端で適宜折返しをする 改行文字では改行す
    white-space プロパティ(空白文字及び折返しの取扱) - CSS リファレンス
    stealthinu
    stealthinu 2014/09/29
    cssで改行を反映できるようにする white-space: pre-lineとpre-wrapはCSS2.1以降とのことでIE8以降で使えるとのこと。
    リンク

  • white-space｜プロパティ｜CSS HappyLife ZERO


    white-spaceプロパティは、半角スペースやタブなどの空白類文字をどのように扱うか指定します。 対応ブラウザ プロパティの解説 値normal｜pre｜nowrap｜pre-wrap｜pre-line｜inherit 初期値normal適用される要素 全ての要素 継承 します パーセント値 N/A メディア visual 値の解説normal連続する空白類文字は1つの半角スペースにまとめて、行ボックスの端まで行くと必要の応じて自動的な改行をします。 任意の位置で改行する場合は、br要素などで行います。 pre 連続する空白類文字の削除を禁止して、自動的な改行はしません。 ソース内の改行位置やbr要素が有る場合はその位置で改行されます。 nowrap normalと同様に連続する空白類文字を1つの半角スペースにまとめますが、自動的な改行はしません。 任意の位置で改行する場合は
    stealthinu
    stealthinu 2014/09/29
    cssで「white-space: pre-line」指定すると<br>タグなくても単に改行するだけで改行に出来る。pre-wrapだと改行の他に空白もそのまま空白として扱うように出来る。
    リンク

  • http://lollyt.in/

    stealthinu
    stealthinu 2014/07/08
    bootstrapのページのひな形を作るためのサービス。もしくはbootstrapでよく使われるデザインのスニペット集とも言える？レスポンシブにするのにこれでひな形作るとかいう用途に使えそう。
    リンク

  • 知っておくと効率的！コーポレートサイト制作が捗るjQuery プラグインや使い方まとめ


    作成‥2014/04/7 更新‥2014/11/01 Web制作 > あの企業サイトで使われている効果やテクニックをまた探さないといけない、そもそもどういったキーワードで探したらいいのか分からない。そんなこんなで、今回は奇抜なものではなく、﹁企業サイトで見たことある！﹂というような、コーポレートサイトに使えそうな定番のプラグインや作り方をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スライドショー1．カルーセル︵横︶2．フェードアウト3．画像と文字をスライド4．文字が遅れて移動する効果5．異なるタイミングを設定できる ナビゲーション・メニュー6．多階層 ドロップダウンメニュー7．多階層 効果つき8．スマホではドロップダウン9．スマホではセレクトメニューに10．Amazon風 メガドロップダウンメニュー11．横スライド1
    知っておくと効率的！コーポレートサイト制作が捗るjQuery プラグインや使い方まとめ
    stealthinu
    stealthinu 2014/04/07
    これもいいまとめだな。企業サイトでよく使われてるようなjQueryプラグインやチュートリアルをまとめてある。ほんとによく使いがちなのがまとまってるのがよい。
    リンク

  • AdminLTE·ここまで多ければ何でもできそう。多機能なBootstrapベースの管理画面テンプレート MOONGIFT


    これで十分でしょ！ Bootstrapで作る管理画面は相当増えてきているようです。確かに一般ユーザ向けに提供するとBootstrap臭が出てしまいますが、管理画面であれば問題はないですよね。 ということで今回は新しいBootstrap製の管理画面テンプレートAdminLTEを紹介します。高度なウィジェットが数多く提供されていますので使い勝手良さそうですよ。 AdminLTEの画面 今回もスクリーンショット多めで紹介します。 ダッシュボード。この時点でかなりリッチ。 ボックス。これだけ多彩なパターンがあると言うのも凄いですね。 左端にはちょっとした設定を表示させています。 背景色を変えるだけでも随分印象が違います。 グラフ。 こちらもグラフ。 外部ライブラリもそつなく使いこなしています。 スパークラインも！ アラート。ちょっと飛び出しているのがいい感じです。 アイコン。 ボタン。フラット系で
    AdminLTE·ここまで多ければ何でもできそう。多機能なBootstrapベースの管理画面テンプレート MOONGIFT
    stealthinu
    stealthinu 2014/03/14
    bootstrapベースで管理画面のテンプレート。基本部品だけじゃなくHTMLエディタとかカレンダーとかメールやタイムラインのテンプレートもある。これは便利そう。
    リンク

  • ハイクオリティかつ無料のテーマ配布サイトBootstrap Zeroが凄すぎる！ - ku-sukeのブログ


    無料なのにこのクオリティヤバイ！！ Bootstrap Zeroはその名の通り、Bootstrapをベースにデザインされた美しいテーマが無料で配布されているサイトです。 これまでもStart BootstrapとかBootswatchとか無料のサイトが合ったのですが、無料だけあって有料のテーマと比べるとちょっとベーシック感が否めない状況でした。 ところがこのBootstrap Zeroはかなりクオリティが高いテンプレートが多いです。自分でデザインする人のためのStarterから、そのまま使えるデザイン済みのThemes、さらにFacebook風やGoogle+風、Android風などもあってかなりのクオリティっぷり！ それではいくつか御覧ください。 Starter 本家のexampleにひと手間加えた感じです。Themesこちらは気に入ったものを幾つか Admin 管理画面で使える！！
    ハイクオリティかつ無料のテーマ配布サイトBootstrap Zeroが凄すぎる！ - ku-sukeのブログ
    stealthinu
    stealthinu 2014/03/05
     bootstrapの無料テーマ。本家だとサンプル少ないのでよい。○○っぽいページ、のデザインがいくつかあってこれベースに直すと良いかも。  

    ●webデザイン
    ●web開発
      
    リンク

  • ひとりでWeb制作できた！Webデザインの勉強にもなる独学「スライド」総まとめ


    作成‥2014/02/24 更新‥2016/06/30 Webデザイン > デザインの流れや基本的なフローなどを勉強しておくだけでも効率が良くなるし、起業の際にも役に立つと思います。デザイナーさんにもっとデザイン力を上げたいと言われたのもあり、今回は制作フローとデザインやその他の知識を学べるように、出来るだけ制作フローにそって、スライドをまとめました。膨大な量になったので簡潔にしています。全てスライドです。 エンジニア速報は Twitter の@commteで配信しています。
    ひとりでWeb制作できた！Webデザインの勉強にもなる独学「スライド」総まとめ
    stealthinu
    stealthinu 2014/02/24
    あーまたこの人だ。今HTML+CSS+jQuery+javascript教えてるのだけど独学してもらうポインターとしてとても良さそう。
    リンク

  • Sass - チュートリアル

    この文書は古いSassウェブサイトに載っていたチュートリアルの訳で、2013年12月現在もう新しいウェブサイトには存在しません。新しいウェブサイトでのチュートリアルにあたるSassの基本の日本語訳を参照してください。 Translation of: Sass - Tutorial Ruby と Sass のインストール まず、Sass がちゃんと動作するようにします。OS X を使用しているのなら、既に Ruby がインストールされているでしょう。Windows ユーザーならば Ruby のWindows インストーラーで、Linux ユーザーならパッケージ・マネージャーでそれぞれ Ruby をインストールすることが出来ます。 Ruby のインストールが完了したら、以下のようにして Sass のインストールを行います: gem install sass 最初の Sass スタイルシート 非

    stealthinu
    stealthinu 2014/02/05
    Sassの最低限のチュートリアル。CSSわかってる人向けのまとめという感じ。
    リンク

  • すごい役立った！Web制作に特化した「提案書」に入れておきたいこと、知識


    作成‥2014/02/3 更新‥2014/11/01 ディレクション > 提案書に必ず書いておきたいことを順を追ってメモしました。イメージはブログ用なので簡易的なものとなっています。フローや内容は会社によって違うと思います。 エンジニア速報は Twitter の@commteで配信しています。 もくじ サイトリニューアルの提案 自社分析によるサイトの問題点とその解決策 見やすさ、管理しやすさへの主な工夫 サイトレイアウト案︵トップページ︶ フロント画面＋管理画面 イメージ 保守＋運用 セキュリティ面でのご提案 バックアップと緊急時の対応 サイトマップ案 強み、実績、事例 スケジュール サイトリニューアルの提案 企画提案書の流れをメモしておきます。実際に提案するときは、ポイントをおさえて簡潔に説明していきます。必要な部分だけピップアップして使います。 自社分析によるサイトの問題点とその解決策
    すごい役立った！Web制作に特化した「提案書」に入れておきたいこと、知識
    stealthinu
    stealthinu 2014/02/03
    今度はweb開発提案書のレジュメか。ここんところこの人のまとめエントリーにすっかりやられてる。
    リンク

  • Internet Explorer デベロッパー センター

    The new Microsoft Edge is here and now available to download on all supported versions of Windows, macOS, iOS and Android.

    stealthinu
    stealthinu 2013/04/05
    IEでの検証をするためのWebサービス。マイクロソフト提供。
    リンク
  • 1

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.