タグ

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

タグの絞り込みを解除

Webデザインに関するku_marinのブックマーク (668)

  • Nyle Engineering Blog

    OpenAIWhisper文字起こし25MB制限を解決するPHP, Laravel, ffmpegを使ったファイル分割の例 OpenAIAPIを使った音声の文字起こしは、今や多くのアプリケーションで利用されています。この記事では、特にWhisper文字起こしの25MB制限に焦点を当て、PHP, Laravel, ffmpeg

    Nyle Engineering Blog
  • 『デザインは8の倍数でできている』

    1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 mama&crowdのデザイナー、長谷川彰之介です。 今回は、WEBサイトの「余白」や「ブロックサイズ」「WEBサイトの横幅」に対して 「最適な値は存在するのか?」 について考えてみたいと思います。 少々長いですが、お付き合いのほどよろしくお願いします。 ボックスサイズとは、「ヘッダー」「コンテンツ」「ナビゲーション」などの ひとつひとつの固まりの大きさ(サイズ)を指します。 【第1部】8の倍数 WEBサイトのUIをデザインしていて悩まされるのが「余白」です。 「ここは3px…いや4pxか。もっと空けたら見やすくなるかもしれない。6p

    『デザインは8の倍数でできている』
    ku_marin
    ku_marin 2014/05/07
    なんとなく余白10じゃなくて8px取る時あったけどこういうことかな
  • デザインの役割からみる「トーン」と「マナー」

    こんにちは。デザイナーの山口陽一郎です。 去る2014年2月19日(水)に、株式会社パソナテック様主催のセミナー「クリエイターのためのトーン&マナー設計」にて登壇させていただきました。 皆さんは「トーン&マナー」という言葉を耳にしたことがありますか?「トンマナ」と略されることの方が多いかもしれません。その説明の前に、ちょっと寄り道をさせてください。 ■デザインのふたつの役割とトーン&マナーの演出 デザインには大きく分けてふたつの役割があります。 1. 機能性を高める これはユーザーにとって製品をより使いやすくしたり、誤操作の危険をなくしたり、迷わないようにサポートするための役割です。 そしてもうひとつが今回のセミナーのテーマとしてとりあげた、 2. トーン&マナーの演出 です。製品に、それが使われる場にふさわしい属性・キャラクターを付与する役割です。 たとえばレジャーグッズなら「楽しさを想

    デザインの役割からみる「トーン」と「マナー」
  • ユニークな「ページの先頭へ」や「ページトップ」の実装例 10 - NxWorld

    そのページの先頭へ移動する要素として設置しているところも多い「ページの先頭へ」や「ページトップ」がユニークなサイトのショーケースです。 コーポレートサイトのような堅めのデザインをする場合は凝り過ぎると浮いてしまう場合があるのでシンプルなものを使用することが多いと思いますが、ちょっとしたキャンペーンページやイラストをふんだんに使っているようなサイトであれば、こういった細かいところにも動きを付けてあげると遊び心があって面白いですね。 April 19, 2014 追記 @OZPAさんから教えていただいたものを含め、他にもユニークなものがあると教えていただいた3サイトを新たに追加しました。 株式会社LIG [リグ] 注意:効果音が出ます 「ページの先頭へ」や「ページトップ」の要素がどうののレベルではなく、クリック後の動作など全体的に非常にユニークで、むしろこだわり過ぎと思うくらい凝ってます。 少

    ユニークな「ページの先頭へ」や「ページトップ」の実装例 10 - NxWorld
  • HYPER MARKET

    スマートフォン(以下、「スマホ」)やタブレットなどの携帯端末は日々進化しており、それによって私たちの日常の暮らしは便利になりました。日でも一連の診察プロセスがオンライン上で完結するオンライン診療が一部で法的に認められており、手持ちのスマホで病気の診断を即座に受けることができます。今後、スマホやタブレットに様々な人工知能が搭載され、そしてSiriなどの音声アシスタントが高精度化し、私たちの生活はより豊かになっていくことでしょう。 各社のスマホアシスタント機能の比較 2 Jul 2021 iPhoneならSiri、Android端末ならGoogleアシスタント、KindleAmazonの機器ならAlexaと各社様々なアシスタント機能がありますが、それぞれにどのような違いがあるかご存じでしょうか? 2021年登場の最新スマホ 28 May 2021 2021年に発売のXperia 1 III

    ku_marin
    ku_marin 2014/04/18
    今週末オープンの原宿のスマフォアクセサリーショップみたい。斜めになってるから思わず身体を斜めに向けてみてしまったww配色かわええおしゃれ
  • WebデザインのスクラップはInboardがいい

    Inboard - Organize Your Inspiration よっぴーにInboardというアプリを教えてもらった。Webサイトやらなんやらのキャプチャを保存できるアプリ。Emberみたいなやつ。今はベータ版。 なんかこんな感じでWebサイトのスクラップとかできる。別にサイト全体じゃなくてもいいし、ロゴだけとかパーツだけのスクラップにも向いている。あとはDribbbleで自分がLikeしたShotを自動でスクラップしてくれる機能もある。あとはタグ付け、フォルダ分けなどができる。 Emberの方がキャプチャ機能は安定しているし、複数デバイス間で同期もできる。でもEmberはサムネイル一覧が同じ高さで並ぶ(クロップされる)のに対して、InboardはPinterestのような表示で、縦長のサイトはちゃんと縦長に表示される。UIパーツのスクラップとかならEmberでもいいと思うけど、W

    WebデザインのスクラップはInboardがいい
    ku_marin
    ku_marin 2014/04/15
    emberよりこっちかなぁ
  • UXデザインというものについて - yzgwyskw

    UXという言葉は非常に誤解されているように感じます。これはUX〇〇を単にUXと言ってしまう軽率な省略によって引き起こされているのではないかと思っています。この省略のために、UXというのは結局なんなのか?という疑問を引き起こしているように感じています。この文章は、そういう疑問を持っていた一年前くらいに自分に対して説明を行うような気持ちで書きました。ただし、私は仕事としてUXを扱っておらず、自分の理解を整理するためにここで文章にしていることを留意ください。 UXとは そもそも、UXというのは"ユーザが製品に触れている際に経験する知覚や感情"であり"現実世界に起こっている事象"です。ここで重要なのは、UXは単に事象でありその他の意味は含まれていないということです。直感的といった曖昧な言葉がUXの形容詞として用いられていることが多いため、使いやすくなければUXでないような印象があるかもしれませんが

    UXデザインというものについて - yzgwyskw
  • デザインする上で大切にしていること - デザイナーのイラストノート

    デザインしてますか?spicagraphです。ふだんツールに関する記事を書いたり、Twitterでつぶやいたりしていると「こいつ見た目のことばっかりやな」と思われそうで、めずらしくデザインするとき大切にしていることについて書きます。わたしの仕事は主にEC、LP、プロモーション、コーポレートサイトなので、UI/UXみたいなかっこいい話でないことは前置きしておきます(でもだいじなおしごとだよ!) デザインは誰のため? 大前提として、わたしは誰に向かってデザインしているのか。 わたしはフリーランス仕事をしているため「お客さん」がたくさんいます。仕事をくれた制作会社のディレクターさん、クライアント、ユーザーです。webサイトの「お客さん」はユーザーですが、ユーザーだけがいいと思うものだけが良いデザインだとは思いません。 webサイトは更新されていくものです、多くの場合はクライアントによって。とい

    デザインする上で大切にしていること - デザイナーのイラストノート
    ku_marin
    ku_marin 2014/03/14
    たとえがわかりやすく、イラストがかわいい
  • TempRetro

    メニュー インフォメーション 管理人はAo木です 何かありましたらTempRetro@gmail.comへ連絡ください 弱小サイトだっていいじゃない

    ku_marin
    ku_marin 2014/02/14
    かつて運営してたテンプレートサイト載せてもらってた!ありがとうございます。あのサイトあっての今なので非常に感慨深い。。
  • シングルページなサイトをデザインする上で、知っておいて損は無いかもしれないプラグインとか色々! | バンクーバーのうぇぶ屋

    最近多いですねー、1ページで完結するタイプのサイト。One Page Loveのサイトなんかから、シングルページの事例も大量に見ることが出来ますし、パララックスやらフリップ型のコンテンツやら、なんか色々出てきてて着いて行くのがやっとです… でも実際シングルページをつくろうとすると、え?何これどうなってんの?って物も多くてビビることもしばし。 ってことで、今日は僕が知ってる中で『お、これ、シングルページ作る時に使えるんじゃね?』って物を幾つかご紹介させて頂きます! 主にはシングルページデザインの表現の幅を広げるjQueryプラグインの紹介になるかなと思いますが、楽しい物も多いので、是非興味があれば試してみてくださいませ〜! それではいってみましょー! パララックススクローリング系プラグイン この辺は以前に紹介したことがあるものばかりなので、ぱぱーっと行きます。 jQuery Waypoint

    シングルページなサイトをデザインする上で、知っておいて損は無いかもしれないプラグインとか色々! | バンクーバーのうぇぶ屋
  • Webサイトに変なスクロール使うのをやめろ

    最近変なスクロールを使ってるサイトを見る。 これとか http://www.apple.com/iphone-5s/ これとか http://heteml.jp/ 他にも色々。 Javascriptがなんか頑張ってんだろうけどさ、 正直陶しいよ。 やけに重いし、使いづらいし。 Chromeだとヌルヌル動くって? みんなChrome使ってる思ってたらアカンでほんま。 追記: この変なスクロールはパララックスと言うそうです。 「この変なスクロール=パララックス」ではないそうです。 また、「この変なスクロール=パララックスのひとつ」と言う訳でもないみたいです。 ごめんね、もうこの追記消したい気分。

    Webサイトに変なスクロール使うのをやめろ
  • 「Web」とはなにか?じっくり考えてみた(2014年)

    「Web」について今の自分が考えてることを記録として書いてます。去年に続き三回目です。タイトルに2014年が入ってるのは時間と共にWebのあり方や自分の考えも変わっていくからです。 はじめに 毎年恒例の記事三年目です。 「Webデザイン」とはなにか?じっくり考えてみた(2012年) 「Webデザイン」とはなにか?ザックリ考えてみた(2013年) 今年の内容は「Webデザイン」に収まらないのでタイトルを少し変えました。 更にwebの範疇を超えて”インターネット”に該当するであろう部分まで触れてますが、切り離して考えられないので”インターネット”も含めて考えています。 この記事は2013年の総括や2014年のトレンドではなく、Webについて今の自分が思ってることをつらつらと書いてます。異なる意見があって当然だと思ってますし、正解を出したい訳でもありません。 自分の考えを整理するため、そして読ん

    「Web」とはなにか?じっくり考えてみた(2014年)
  • 25 Outstanding Magazine Style Websites - Vandelay Design

    One of my favorite styles of web design to take inspiration from is the magazine-style. Creating a well-designed site that looks good, allows for good usability, and features a lot of content without cramming items onto the page is a very difficult task. Blog theme designers can often put some of this inspiration into practice in their own work, as blogs often face the challenge of displaying a lo

    25 Outstanding Magazine Style Websites - Vandelay Design
    ku_marin
    ku_marin 2014/01/14
    雑誌風webデザイン
  • Inspired Design Resources for Creatives | Pixeden Club

    Inspired Design Resources for Creatives.Exclusive graphic, web and design assets club. Download free resources and get access to our Premium files from $9 a month

    Inspired Design Resources for Creatives | Pixeden Club
    ku_marin
    ku_marin 2013/11/29
    商用OKの素材たち。素材のレベルも高いけどサイトデザインのレベルもめっちゃ高い
  • 31Three - Web Development, Website Design, Graphic Design in Niagara, Ontario

    Transforming your ideas into beautiful interfaces Discover what we’ve done for others... View Our Work

    ku_marin
    ku_marin 2013/11/13
    あーとでー
  • ウェブデザインで大切な空白スペースの効果的な5つの使い方

    空白スペース(ホワイトスペース)が、ウェブサイトのユーザエクスペリエンスに与える5つの重要な効果を紹介します。 5 Ways How Whitespace Affects The User Experience 下記は各ポイントを意訳したものです。 はじめに:空白スペースの基礎知識 1. 空白スペースがデザインに使いやすさを加える 2. 空白スペースがコンテンツに読みやすさを加える 3. 空白スペースがビジターに休憩を与える 4. 空白スペースがデザインをモダンに見せる 5. 空白スペースがあなたのデザインに感動を与える はじめに:空白スペースの基礎知識 空白スペース(ホワイトスペース)は、ウェブデザインにおいて非常に人気の高いデザイン要素です。この空白スペースは元々は印刷デザインからのもので、「テキストとグラフィックの欠如」を現します。と同時に空白スペースは「空きスペース」以上の役割を果

  • ズルいデザインテクニック2013 + セミフラット version

    [大阪] プログラマー向けデザイン勉強会で発表させていただきました。 http://connpass.com/event/3086/ --- [あわせて読みたい] KSSで作るパターンライブラリ by @machida https://speakerdeck.com/machida/k…

    ズルいデザインテクニック2013 + セミフラット version
    ku_marin
    ku_marin 2013/09/24
    セミフラット一番しっくりきてすき
  • デザインに立体表現を取り入れるときのセオリー×6 | ベイジの社長ブログ

    iOS7の登場で、フラットデザインへの関心はますます高まっていることでしょう。 ここではそんなトレンドは一切無視して、UIデザインにおける立体表現を行う上で、おさえておくべき大切なポイントをまとめてみました。これらをマスターして、時代に逆行するゴリッゴリの立体表現を行えるようになりましょう。 セオリー1:現実世界の「光源」の基ルールを守る 唐突ですが、この2つのボタン、立体表現としてどちらが正しいと思いますか? 左側、「A」のボタンには、以下のような光源の矛盾があります。 ボタン体の影は、右下に付いている。つまり、光源は左上。 へこんだAの影は、右上に付いている。つまり、光源は右上。 ドロップシャドウは、真下に付いている。つまり、光源は真上。 一方のBは、すべての要素の影が、光源が上の表現になっています。つまり、正解はBです。そしてこれが、現実世界での「光源」(=影)の基ルールです。

    デザインに立体表現を取り入れるときのセオリー×6 | ベイジの社長ブログ
  • 選ばれるウェブデザインとは

    東京ベイ潮見プリンスホテル ”水辺の宿場町”をデザインコンセプトとするアートホテル「東京ベイ潮見... 詳細を見る

    選ばれるウェブデザインとは
  • box-shadowで表現する、「セミフラット」なズルいデザインテクニック

    box-shadowで表現する、「セミフラット」なズルいデザインテクニック:ズルいデザイン(3)(1/2 ページ) 世の中、フラットデザイン流行りですが…… iOS 7がフラットデザインを採用したのを皮切りに、Webデザインのトレンドがフラットデザイン一色になってきましたが、立体感を完全に排した色面と空間、シンプルな描画の組み合わせだけのデザイン表現は、ある種ごまかしが効かず、また適切な利用方法を喚起させるようなUIも表現がなかなか難しいものです。 例えば、「ボタンは押せるもの」であると表現するための「押したくなる感じ」を喚起させる立体感は、ユーザビリティ面でもまだまだ有効です。今回は、流行のフラットデザインの中でも違和感なく使えて、また適切なアフォーダンスの表現が可能になる、「やりすぎていない立体感」を目指した、box-shadowを活用した各種ボックス表現の作り方を紹介します。 NGな

    box-shadowで表現する、「セミフラット」なズルいデザインテクニック