タグ

ブックマーク / sinap.jp (19)

  • SINAP | 「デザイン批評勉強会」のスライドを公開!

    こんにちはシナップ大川です。 みなさんはデザイナーからあがってきたデザイン案にどのようにフィードバックをすればいいか悩んだ経験はないでしょうか。 逆にデザイナーならフィードバックをうまく受け取れなかったり、場合によっては心ない意見に傷ついたという方もいるかと思います。 デザインは言語化が難しい抽象的な部分も多いため、その決定プロセスでは関係者間で多くのストレスを抱えがちです。 そこで今回は『みんなではじめるデザイン批評』というを参考に以前シナップの社内勉強会で行った「デザイン批評勉強会」のスライドを公開したいと思います。 デザインをよりよくしていくため、デザイナー、非デザイナーのコミュニケーションはどうあるべきか、フィードバックのコツや工夫、組織で共有したい考え方などの参考になれば幸いです。 より詳しい内容が知りたい!と言う方、冒頭および資料の中でも触れましたが、この勉強会でも参考にした

  • SINAP | いま知っておきたい「アクセシビリティ」の基本と便利な確認ツール

    はじめまして!4月に入社したデザイナーの竹田です。 今回は初めてのブログということで緊張していますが、最後までお付き合いいただけると嬉しいです! 早速ですが、デザイナーチームでは以前「アクセシビリティ」というテーマでチーム発表をしました。 今回はその内容について触れていきたいと思います。 目次 アクセシビリティとは? Web制作にまつわるアクセシビリティ アクセシビリティ確認ツール 終わりに 1. アクセシビリティとは? 最近よく耳にする「アクセシビリティ」という言葉ですが、皆さんはその意味をご存知でしょうか? 私は漠然と「障がいを持つ方や高齢の方のためにあるもの」といったイメージを持っていました。 もちろんそれも間違いではないのですが、アクセシビリティという言葉はもっと広範囲も含みます。 「全ての人が、どんな利用環境でも情報にアクセスしやすくすること。」 それがアクセシビリティの持つ

  • SINAP | 実は前準備が重要!?ペルソナの作り方

    こんにちは、村田です。 今日はUXデザインプロジェクトにおける『ペルソナ』の作り方について、簡単にご紹介します。 「ペルソナは知っているし、ぜひ取り入れたい。だけどどうやって進めればいいのか分からない!」という方、ご参考になれば幸いです。 UXデザインにおけるペルソナの説明や重要性を知りたい方は、以下の記事をご覧ください。 UXデザイン×グロースハックによる成長するサイトへの施策 目次 ペルソナを作るための情報収集 集めた情報の整理、分類 ペルソナの状況設定、シートの作成 レビュー 1. ペルソナを作るための情報収集 既存サービスのブラッシュアップなら、今すでに利用しているユーザーの情報を、新しいサービスなら、そのサービス利用を想定してるユーザーの情報を集めます。 どんな情報を集める? 集める情報は大きく分けて2種類。定量データと定性データを集めます。 定量データとは、年齢や性別、職業など

  • SINAP | 意外にバリエーションが豊かだった。文章を読ませるためのチャットUIをまとめてみました

    こんにちは。シナップ広報・ライターの鈴木しのです。 突然ですが、みなさんは普段友人や家族とコミュニケーションを取る際「LINE」を利用していますか? LINEが世の中に広まってから、早6年ほど。昔はガラケーでメールを駆使していたというのに、あっという間に電話もメッセージもLINEに移行。時の流れは早いものですね。 今回ブログで注目したいのは、文章を読ませるために「チャットUI」を取り入れたサービスについて。チャットボットなどによるお問い合わせフォームなどでチャットUIを利用するケースが増えていることは、みなさんも感じてらっしゃると思いますが、実はこのチャットUI、最近、文章を読ませるためにも利用されています。 工夫が施されたさまざまな文章を読ませるためのチャットUI、どのようなものがあるのか、実例と合わせてご紹介していきます。 チャットUIとは? チャットUIとは、言葉の通り、チャットで

  • SINAP | 来るの?来ないの?ではなく、今知っておきたいPWAのこと

    こんにちは。シナップ広報・ライターの鈴木しのです。 みなさんは「PWA」という言葉を耳にしたことはありますか? iOS11.3から一部で機能が利用できるようになったことで、最近なにかと話題に取り上げられている比較的ホットなこのキーワード。 「Progressive Web Apps」の略語で、その名の通り革新的なウェブアプリケーションの意味を持っています。 今回は、先日行われたエンジニアチームの野原・山下による社内勉強会の内容を元に、PWAについてまとめました。 Webアプリとネイティブアプリの良いところを取り入れた「PWA」 冒頭でも書きましたが、PWAは、「Progressive Web Apps」の頭文字をとった言葉です。ざっくりと説明すると、「Chrome Dev Summit 2015」でGoogleが提唱した、Webアプリとネイティブアプリの良いとこ取りを実現しようとする取り組

  • SINAP | 社内の機材でやってみよう! 低予算でできるスマホのユーザビリティテスト(機材編)

    シナップのディレクターの三國です。 前回の記事では、計画と評価設計についてご紹介しました。 今回の記事では、 「2-5. 実査の進行シート」の進行内容の説明 ユーザビリティテストに必要な機材やアプリケーションの準備 を紹介していきます。 第1回:「社内の機材でやってみよう! 低予算でできるスマホのユーザビリティテスト」(準備編) 第2回:「社内の機材でやってみよう! 低予算でできるスマホのユーザビリティテスト」(機材編) 第3回:「社内の機材でやってみよう! 低予算でできるスマホのユーザビリティテスト」(分析編) 「2-5. 実査の進行シート」の進行内容の説明 実査では、上に書いた内容を実施します。 イントロ 5分 はじめにに挨拶や自己紹介を行い、緊張をほぐします。被験者の人がリラックスして操作できるように、簡単な雑談をしても良いでしょう。 その後、テストの概要や目的の説明、全体の想定時間

  • SINAP | パーツごとに見るモバイルUI:参考にしたいUIまとめ

    こんにちは。飯山です。 5回に渡ってお届けしているシナップデザイナーチーム発表からの「パーツごとに見るモバイルUI」シリーズ記事、最後の第5回は「参考にしたいUIまとめ」です。 スマートフォンをはじめとしたタッチデバイスならではのUI表現として、ユニークであったり、機能的であったりと、シーンに応じて参考にしたいモバイルUIをピックアップしてご紹介します。 第1回:「ハンバーガーメニュー以外の特徴的なメニュー表現の事例紹介」富川 第2回:「ハンバーガーメニューを押した際のナビゲーションの表現方法」沓掛 第3回:「カルーセルの事例と、設計・デザイン時に気をつけること」小茅 第4回:「フォームの事例と、UIを考えるときのポイント」久保田 第5回:「参考にしたいUIまとめ」飯山 ヤマト運輸http://www.kuronekoyamato.co.jp/ 画面の左上部に配置されたハンバーガーメニュー

    SINAP | パーツごとに見るモバイルUI:参考にしたいUIまとめ
  • SINAP | 無料のA/Bテストツール「Google Optimize」の設定手順からレポート作成までを一通りやってみました!

    ホームブログアーカイブ無料のA/Bテストツール「Google Optimize」の設定手順からレポート作成までを一通りやってみました! こんにちは、ディレクターチームです。3月にGoogle Optimizeが一般公開されましたね。昨今のA/Bテスト需要の高まりの中とはいえ、有償ツールには中々手を出せずにいることも多かったのですが、このGoogle Optimizeはなんと無料。ディレクターをはじめシナップ社内でみんな早く使ってみたいという声が多かったです。そこで、まず私たちディレクターが使ってみて、デザイナーやエンジニアにも気軽に使ってもらえるように設定手順からレポート作成までを一通り整理してみました。今回はそちらを皆様にも共有したいと思います! ブログ記事の目次 Google Optimizeとは Google Optimizeでできること Google Optimizeの設定の流れ

  • SINAP | 管理部門ってやること多すぎ!? 管理業務をもっと楽にするためのクラウドサービス7選

    新年明けましておめでとうございます、アドミンスタッフの小泉です。 みなさん、今年の抱負は決まりましたか?私の抱負は、運動、摂生でしょうか。あんまりラーメンばかりべないように気をつけます。 さて、あなたの会社には管理部門の担当者が何人いるでしょうか?中・小規模の組織の場合、管理部門の人数は少なく、ひとりで何役も兼ねているのが普通かと思います。 SINAPは現在14名。唯一のアドミンとして管理業務全般を請け負う私も例にもれず、日々の総務や採用活動、会計処理などの月次業務に、給与改定、賞与評価、健康診断、入退職の対応、最近だとマイナンバー対応などなど、多岐にわたります。 最近では、管理業務に役立つクラウドサービスがたくさん出てきていますね。機能的にもミニマムのものから大規模企業に対応出来るようなものまで、その特性も様々。いざ導入しようにも、どれが一番自分の会社に合っているのか探すのも一苦労です

  • SINAP | 簡単!Backlogの課題一括登録の解説【親課題も一括設定】

    こんにちは、ディレクターの三国です。みなさまBacklog使ってますか? 11月22日(火)に新UIがデフォルトUIに変更され、12月6日(火)には旧UIが使えなくなり正式以降となりました。 Backlogが新UIに移行することになった経緯は、ヌーラボさんのブログで細かくまとまっているので、ご興味ある方はぜひこちらの記事をどうぞ。 ベータリリース開始!BacklogUIアップデート (1) 決意に至る経緯 - ヌーラボ [Nulab Inc.] ベータリリース開始!BacklogUIアップデート (2) 〜変更点とデザイナーのこだわり編〜 - ヌーラボ [Nulab Inc.] 〜より楽しく仕事に集中できるように〜Backlogのデザインを大幅にアップデートします! - ヌーラボ [Nulab Inc.] BacklogUIの5つの便利な新機能をご紹介します - ヌーラボ [Nula

  • SINAP | Movable Typeの脱初心者を目指そう!MTで作る小・中規模サイトの実装入門

    MovableType初心者8年目、村山です。 今回は、初めてMovableTypeでHTMLテンプレートをMovableTypeのテンプレートに落とし込む(私はこの作業を「MTの実装」と言ってます)人向けのエントリーです。初めてMovableTypeに触る人にはちょっと敷居が高い、脱初心者レベルのつもりで書いています。 社内で、何かMovableType実装初心者に良いとかエントリーとかないですかね〜?っていうお話を受けて、パッと思い浮かぶ情報がなかったのでないなら書くかと書いてみました。これを読めばバリバリ実装できる!っていうものじゃないんですが、MTの実装ってこうやって進めるんだよっていう指標になれば幸いです。 小〜中規模程度のサイトのつもりで書いてるので、大規模サイトの実装を丸投げされた初心者諸兄には物足りない内容ですがご容赦ください。駆け込み寺情報は文末の おわりに に記載して

  • SINAP | すぐに実践できるCSS設計 OOCSSの基本を理解しよう

    こんにちは、野原です。 今年シナップは11周年を迎え、R&Dやグロースといった新しい取り組みをスタートしました。そんなシナップの活動をより皆さまへわかりやすくお伝えすべく8月にシナップサイトのフルリニューアルを行いました。 今回はサイトリニューアルの裏側として野原が担当したパートから、シナップサイトのcss設計の元となったOOCSSという考え方ついてご紹介しようと思います。 考え方を理解すればすぐに取り入れることができますので、何となくルールを意識せずにcssを書いていた人、もっと編集しやすいcssにしたいと考えてる人はぜひこれを機に実践してみていただければと思います。 cssの設計ってどうして必要なの? cssはウェブページのスタイルを指定するための言語です。つくりがシンプルなので少し勉強をすると誰でも比較的簡単に書くことができるのですが、簡単がゆえにきちんとルールを決めて運用をしていか

  • SINAP | 社内勉強会レポート「Webアクセシビリティ勉強会:アクセシビリティと これからのWebデザイン 我々はどこに向かうのか」講師:BA 伊原力也氏

    ホームブログアーカイブ社内勉強会レポート「Webアクセシビリティ勉強会:アクセシビリティと これからのWebデザイン 我々はどこに向かうのか」講師:BA 伊原力也氏 こんにちは、富川です。GWも明けて爽やかな気持ちのよい季節になりましたね。 さて、シナップでは先日、以前から交流のあるインフォメーション・アーキテクトの伊原力也さんに講師に来ていただき、webアクセシビリティについての社内勉強会を開催しました。今回はその様子をご紹介いたします。 開催の経緯と、参考図書のご紹介 今回講師をしてくださったのは、BAでシニア・インフォメーションアーキテクトとしてご活躍されている伊原力也さんです。シナップは以前から伊原さんにとてもお世話になっていましたが、先日参加した別の勉強会でお話しをする機会があり、シナップでもぜひWebアクセシビリティの勉強会を開催しましょうとお声がけをいただきました。 前編:ア

  • SINAP | レスポンシブの基本をおさらい:画像の見せ方とレイアウトのパターンを把握しよう

    シナップの小茅です。今回はRWDならではのデザイン表現として「よく見かける画像の見せ方」と、簡単にレイアウトパターンについてまとめました。 RWDではマルチデバイス対応を標準としており、ワンソース・マルチデバイスといった運用の効率化など良いメリットもある反面、複数デバイスを考えた設計や実装など、複雑な面も持ち合わせているため、制作前の綿密な計画は非常に重要です。それらを踏まえたまとめをご紹介します。 【 1 】 よく見かける画像の見せ方「RWDならではのデザイン表現とは?」 【 2 】レイアウトパターンのおさらい「デザイン・実装するのは、どのパターン?」 【 1 】 よく見かける画像の見せ方:RWDならではのデザイン表現とは? 最近は技術面においても開発が進み、RWDならではのデザイン表現が増えてきました。 そこで画像の表示方法をどのように考えたら良いか、4点ほど例をあげてご紹介します。

  • SINAP | スマホサイトのメニューボタン、優良企業195社を検証!

    みなさんこんにちは、連載「スマホサイトのメニュー表現」2日目では、実際に企業195社のメニュー表現の調査結果をお伝えしていきます。 それではさっそく見ていきましょう! <スマホサイトのメニュー表現:連載> 1日目:「スマホサイトのメニュー、ハンバーガーボタンで大丈夫?」 2日目:「スマホサイトのメニューボタン、優良企業195社を検証!」 3日目:「参考にしたい!業態別に見る各社のヘッダー周りの表現方法」 調査結果 今回の調査では、幅広い世代にとって知名度の高い全業種の優良企業をできるだけ公平にピックアップしたかったので、Gomezが2015年4月に発表したIRサイトランキングを利用し、上位195社をまず一覧にまとめ、まずはスマホ対応している企業117社に絞りました。 調査票:スマホサイトのメニューボタン 次に、以下の内容で分類を行いました。 1. アイコンの種類 2. メニューボタンの表現

  • SINAP | スムーズに検索させよう!複雑な検索をするときの画面やUIパターン

    こんにちは、久保田です。今日はオンラインショッピングや物件検索などで使用される、検索画面や検索時に使われるUIを見ていきたいと思います。検索と一口に言っても、用意されたカテゴリーの中から1点選ぶものから、複数項目を選べる複雑な検索など様々です。そもそも検索はユーザーが目標物にたどり着くための便利な機能ですが、選択項目が多かったり、各条件が関係し合っている場合などは、見せ方を工夫しないと検索そのものが役に立たなくなってしまいます。事例をあげながら見ていきますので、検索機能のデザインをする際の参考にしてみてください。 もくじ大きく3構成にてご紹介していきます。 よくある検索方法複雑な検索(詳細検索)工夫されたUIやデザインパターン 1. よくある検索方法例えば、オンラインショッピングサイトで買い物をするとき、サイトトップページからユーザーはどのように検索をするでしょうか?国内の主要なECサイト

    SINAP | スムーズに検索させよう!複雑な検索をするときの画面やUIパターン
  • SINAP | はじめてのPowerCMS-オススメポイントと導入事例

    エンジニア、村山です。 ちょっとPowerCMSの事書いてよって社内からお声がかかりましたので今更ながらPowerCMSの記事を書くに至りました。 日のテーマは「PowerCMS、そろそろ使ってみない?」です、よろしくお願いします。 ※この記事はMovable Type Advent Calendar 2015の9日目の記事です。 はじめに この記事では以下の内容から「PowerCMSを使ってみないかい?」とオススメしていくものです。 ターゲットとしては、PowerCMSに興味があるのだけど実際どういうことができるのかわからない人、機能はわかるんだけどどういうことができるのか・どういうところで使われてるのか興味がある人、CMSの選択肢を増やしたい人などに向けて書いているつもりです。 PowerCMSとは オススメポイント グループ管理機能 インポート・エクスポート機能 カスタムオブジェク

  • [SINAP] ウェブブラウザ上で動作する EPUB リーダ「BiB.liophile(ビブリオファイル)」を発表 | News: お知らせ | 株式会社シナップ

    シナップは、日、PCMaciPadiPhone のウェブブラウザ上で動作する EPUB リーダ「BiB.liophile(ビブリオファイル)」を発表し、オンラインでのαテストサービスを開始しました。 シナップが独自に開発した BiB.liophile は、日進月歩で進化するウェブブラウザの性能を最大限に引き出し、縦書きやルビもスマートに表示します。とくに小説や新書などの日語の文章による作品の読書に適していますが、横書きの技術書等にももちろんお使いいただけます。 また、ウェブブラウザ上で動作することにより、ウェブブラウザが持つタブやブックマークなどの機能と組み合わせたり、従来の独立したアプリケーションでは不可能な、シームレスなソーシャル連携なども可能となります。 αテストは、プレビューと、ユーザからのフィードバック収集を目的としており、ごく短時間しか読めないなど非常に限定的な仕様で

  • 勉強会・セミナースペース提供のお知らせ:News SINAP - 株式会社シナップ

    2009.07.27 勉強会・セミナースペース提供のお知らせ SINAPでは次の条件に合う勉強会・セミナー・懇親会などを開催する方に会場を無償提供しています。 有志だけの勉強会から、不特定多数の方を募るセミナーまでご利用頂けます。 以下の条件・環境などをご確認頂き、利用を希望される方はフォームよりお問い合せ下さい。 ご利用条件 営利目的ではないこと 準備および片付けを参加者で行って頂けること。 Web、インターネット、デザイン、マーケティング、アートなど私たちが興味を持つものであること(要審査) 希望すればSINAPのスタッフも参加可能であること。 設備 1F 10名程度までの会議、勉強会 B1F 講義形式35名程度まで グループワーク形式 5人×6島、30名程度まで 全館 立パーティ形式 130名程度(過去実績) 環境 プロジェクター スクリーン100インチ スピーカー(主にBG

    popup-desktop
    popup-desktop 2009/07/31
    これは素敵。というかオフィス広い&キレイ…。
  • 1