slack qa team 2020 01 21

2020-01-21

Time (UTC)	Icon	Name	Message
00:20		yamasy1549	こちらこそ、うまく伝えきれておらずすみません。 たしかに、GitHubにpushしていくと見ていただくのに毎度手間がかかって大変ですね。テストサーバか、完成するまで仮に自分のGitHub Pagesで公開する（ひろく公表はしない）のがよいと思います。
00:20		Kiara Translation	🇬🇧: I'm sorry that this was not well communicated. Certainly, it takes time and effort to see it when you push it to GitHub. I think it's better to publish it on your test server or on your own GitHub Pages until it's completed (we won't make it public).
02:33		uetchy	テスト版のホスト先ですがnow.shがオススメです。ユニークなURLが毎回発行されるので過去のバージョンとの比較も簡単にできます。
02:33		Kiara Translation	🇬🇧: The host of the test version is now.sh. A unique URL is issued every time, so you can easily compare with previous versions.
04:22		ogwata	@yamasy1549 遅れてすみませんでした。D案についてご返事します。 • 「Vivliostyle Colors」を完成させましょう uetchyさんが提起した、まず最初にカラーパレットを定義する方法に賛成です。 ただ、現状の「Vivliostyle Colors」 https://www.figma.com/file/56Vve4gFGaTCML3xwCkAVc/Vivliostyle-Colors は、色数が少なくあまり現実的ではないように思えます（たぶん試験的に作成してみた段階なのでしょう）。 まず、以下のページ等を参考にしつつ、「Vivliostyle Colors」を完成させてはいかがでしょう。 WEBデザインで押さえるべき配色（ベース、メイン、アクセント）の基本「3つのカラー」 https://www.m-hand.co.jp/design/4002/ その上で、現状のグローバルメニュー項目の配色は、若干アドホックな印象をうけます。「Vivliostyle Colors」にもとづき、総合的に見直した方がよいでしょう。 • グローバルメニュー項目とカラーの関連付けを活用しましょう 現状グローバルメニュー項目ごとにカラーが割り当てられていますが、同じカラーを見出しや背景等に使うことで、積極的に読書体験に役立てたいところです。 • グローバルメニュー項目と個々のページの関係を整理しましょう 開発者会議で決まった新設ページが、現状のグローバルメニュー項目にうまく適合していませんね。このあたりを皆で話し合いながらもう少し整理する必要があります。 その際、階層についてもよく考えた方がよいように思います。 たとえば、昨日村上さんから出てきた「Vivliostyle のライセンスについてのFAQ」ですが、あれは「FAQ」のページそのものではなく、その下位ページになりますね。 同様に、「なりたち」「ロゴ」のページは「About Us」の下位に置いた方がよいように思います。 グローバルメニュー項目は考えていくうち膨れがちです。しかし、そうすると整理されない印象になってしまいます。うまく、将来を見据えて包括的なグローバルメニュー項目を考えたいところです（言うのは簡単ですが、むずかしい…）。 • スポンサー募集のページを新設してください これは「About Us」の下位ページになるでしょうか。いや、思い切ってグローバルメニューにするか……皆さんの意見を聞きたいです。 内容は、Vivliostyleへの複数の献金手段を一覧できるものです。 H1 Vivliostyleのスポンサーになりませんか H2 このサイトに広告をいれる Vivliostyleに献金する GitHubのスポンサー（この項目、どなたか訂正願います） H3以下は後送 以上です。 テクニカルブログ｜Webコンサルティングの力で、あるべき未来を創る。エムハンドはWebを軸にしたあらゆる領域をサポート。マーケティング戦略からプロモーションまで一貫して提供するWEB制作会社です。
06:17		uetchy	デザインシステムはShopifyのPolarisを参考に設計しています。 https://polaris.shopify.com/ 実用的である必要があるため、実際にシステムを利用してWebサイトやPubのコンポーネントを設計しつつ改善点をフィードバックしていき、段々とアニーリング（後半ほど変化量を少なく）するイテレーションを回します。 カラーパレットはWebサービスのコンポーネントデザインを念頭においているため、Webサイトの視覚デザイン用として積極的に使う必要はありません。しかし基調色や意味論的な色選択におけるガイドライン（≠ルール）となるように設計しているので、そのような用途で参照してください。 グローバルメニュー項目は考えていくうち膨れがち これを考慮するならスポンサー募集の導線はAboutの内側か、ランディングページ、グローバルフッターに置いた方が良いでしょう。 Our style guide helps us collaborate across disciplines to build a great experience for all of Shopify’s merchants. It promotes consistency, but it’s not a blueprint. Be creative, explore, and evolve the system.
06:17		Kiara Translation	🇬🇧: The design system is based on Shopify's Polaris. https://polaris.shopify.com/ Because it needs to be practical, we use the system to actually design the components of the website and Pub, feed back the improvements, and rotate the iteration that gradually anneals (the amount of change is smaller in the latter half). . The color palette is designed for Web service component design, so there is no need to actively use it for visual design of Web sites. However, it is designed to be a guideline (≠ rule) for selecting base colors and semantic colors, so refer to such applications. & gt; Global menu items tend to swell as you think If you take this into account, I think it's better to place the sponsor recruitment line inside About, on the landing page, or in the global footer.
06:22		uetchy	@yamasy1549 実際にパレットを参照してデザインしてみて、不足しているセマンティクス（例：成功、失敗、警告、ボタン、キャンセル）があったり、色の間に不整合があると感じたら僕にフィードバックをください。
06:22		Kiara Translation	🇬🇧:  Try designing with reference to the palette and give me feedback if you find any missing semantics (eg success, failure, warning, button, cancel) or inconsistency between colors .
06:31		ogwata	Vivliostyle Colorsのアップデート、ありがとうございます。 カラーパレットはWebサービスのコンポーネントデザインを念頭においているため、Webサイトの視覚デザイン用として積極的に使う必要はありません なるほど、了解です。 ただ、色彩設計はしておかないと見づらくなるだけです。 「積極的に使う」というより、基本・基幹のパレット（≠ルール）として使っていければと思いました。
06:31		Kiara Translation	🇬🇧: Thank you for updating Vivliostyle Colors. & gt; The color palette does not need to be actively used for visual design of the website because the component design of the web service is in mind. I see. However, it is only difficult to see unless you design the colors. Rather than “actively use”, I wanted to use it as a basic and core palette (パ レ ッ ト rule).
06:31		uetchy	グローバルメニューのハイライト方法について僕も考えてみました。D案の少し上の方に置いてあるのでコメントをください。
06:32		Kiara Translation	🇬🇧: I also thought about how to highlight the global menu. Please leave a comment at the top of the D plan.
06:34		ogwata	これを考慮するならスポンサー募集の導線はAboutの内側か、ランディングページ、グローバルフッターに置いた方が良いでしょう。 なるほど、Aboutの中にページをおき、同時にグローバルフッターにメニュー項目をおくのですね、いいですね！
06:34		Kiara Translation	🇬🇧: & gt; If you take this into account, it's better to place the sponsor recruitment line inside About, on the landing page, or in the global footer. Indeed, put a page in About and at the same time put a menu item in the global footer, it's good!
06:36		uetchy	ただ、色彩設計はしておかないと見づらくなるだけです。 「積極的に使う」というより、基本・基幹のパレット（≠ルール）として使っていければと思いました。 基調色や意味論的な色選択におけるガイドラインとなるように設計しているので、ご安心ください。
06:36		Kiara Translation	🇬🇧: & gt; However, if you do not design colors, it will only be difficult to see. & gt; I wanted to use it as a basic and core palette (≠ rule) rather than “actively use it”. Don't worry, we've designed it to be a guideline for base color and semantic color selection.
06:36		uetchy	なるほど、Aboutの中にページをおき、同時にグローバルフッターにメニュー項目をおくのですね、いいですね！ グローバルフッター、折角大きいのでそのような情報を置く場所として最適だと思います
06:37		Kiara Translation	🇬🇧: & gt; I see, put a page in About and at the same time put a menu item in the global footer, nice! I think that it is the best place to put such information because there are many global footers
06:43		akabeko	配色についての私見。 配色の内訳は別として色数については現状でも十分だと思います。色数をあえて絞ることで、個々の色が持つ役割が引き立ちます。 <http://Coolors.co
06:43		Kiara Translation	🇬🇧: My opinion about the color scheme. Aside from the breakdown of the color scheme, I think that the current number of colors is sufficient. By dareing down the number of colors, the role of each color is enhanced. Color palette services such as <http: //Coolors.co
06:45		akabeko	なお「色の名前」について役割で命名することはかなり難しいです。 理想論として提案しただけで、業務でグラフィック デザイナーと一緒にチャレンジしてみたりしましたが、結局は red や blue など既存の色名から派生した命名となってしまいました。
06:45		Kiara Translation	🇬🇧: It is very difficult to name the "color name" by role. I tried to challenge it with a graphic designer in my work just by proposing it as an ideal theory, but eventually it was derived from existing color names such as red and blue.
06:47		ogwata	ええ、現状のVivliostyle Colorsで色数は十分だと思います。
06:47		Kiara Translation	🇬🇧: Yes, I think the current Vivliostyle Colors has enough colors.
07:39		yamasy1549	出遅れました。ちょっと整理させてください！ ・色づかいを整理してFigmaのDesign Systemにカラーパレットとしてまとめる。これは視覚的な統一感を持たせるためのガイドラインとして用いる。色に役割をもたせ、用途と色が結びついているとうれしい（現状すでに、一般テキスト色とリンク色はそういう名前で管理しています） ・グローバルメニュー項目と色の関連付けを考える。現状のグローバルメニューの色は適当なので（ごめんなさい！）考え直す余地があると自分でも思います。ogwataさんの提案では見出しや背景にそのカラーを使うとありますが、使える色数が限られている（あまり多くの色を使うのは見にくい）中で、リンク色とバッティングしてリンクが見にくくなってしまわないかちょっと心配です ・ヘッダーのデザインありがとうございます。言語のところシンプルになって嬉しいです ・スポンサー募集について書く。About Usページ内にコラムを設け、グローバルフッター（のコミュニティのところ？）にもそのコラムへのリンクを追加する
07:39		Kiara Translation	🇬🇧: I was late. Let me sort it out! -Organize the colors and organize them in a color palette in Figma's Design System. This is used as a guideline for visual unification. I'm glad that colors have a role and use and color are linked (Currently, general text colors and link colors are managed under such names) -Consider the association between global menu items and colors. The color of the current global menu is appropriate (I'm sorry!) I think there is room for reconsideration. According to ogwata's proposal, the color is used for the headline and background, but the number of colors that can be used is limited (it is difficult to use too many colors), so the batting with the link color makes the link difficult to see I'm a little worried about it ・ Thank you for the header design. I'm happy to be simple in language -Write about sponsor recruitment. Create a column in the About Us page and add a link to that column in the global footer
07:49		uetchy	https://www.hashicorp.com/products/terraform/infrastructure-as-code/ メニュー項目への色の付け方、↑のサイトのように基準となるアクセントカラーを決めてそれに統一してしまっても良いかもしれません HashiCorp delivers consistent workflows to provision, secure, connect, and run any infrastructure for any application.
07:49		Kiara Translation	🇬🇧: https://www.hashicorp.com/products/terraform/infrastructure-as-code/ How to add color to menu items, it may be good to decide on a standard accent color like the site of ↑ and unify it
07:52		yamasy1549	自分もそれはありだなと思っていて、最初の案では一色でした。ぶれぶれですみません……
07:52		Kiara Translation	🇬🇧: I thought it was there, and in the first case it was just one color. Sorry for the shaking ...
08:03		akabeko	リンク色については歴史的な経緯や文化もあるので • 設定せずユーザー環境にまかせる • 設定するが「未読 = 青系」、「既読 = 紫系 or 淡い灰」のように一般的な色の系統を踏襲する のようにするのが無難だと思います。
08:03		Kiara Translation	🇬🇧: Because there are historical backgrounds and cultures about link colors, • Leave it to the user environment without setting • Set, but follow the general color system such as “unread = blue”, “read = purple or pale gray” I think it is safe to do.
08:04		uetchy	良いと確信したらすぐ舵を切る判断を下していただいて構いません！意見した内容が最終的に採用されなくても（僕含めて）誰も気にしないので。
08:04		Kiara Translation	🇬🇧: If you are convinced that it is good, you can decide to steer immediately! Nobody cares, even if my opinion isn't finally adopted (including me).
08:05		akabeko	同感です
08:05		Kiara Translation	🇬🇧: I'm with you
08:06		uetchy	リンク色、未読はプライマリーカラーである青、既読はちょっとわからないですが青以外だと可読性高いと思います。 そういえば黒背景のときのカラーリング考慮してませんでした。後で追加します。
08:06		Kiara Translation	🇬🇧: The link color, unread is the primary color blue, read is a little unclear, but if it is not blue I think that it is highly readable. Speaking of which, I did not consider coloring on a black background. Will add later.
08:10		uetchy	Figmaでテキストやフレームをドラッグで拡大縮小したい場合はスケーリングツール（Kボタン）が便利です。最初これを知らなくて大変でした。
08:10		Kiara Translation	🇬🇧: The scaling tool (K button) is useful if you want to scale the text or frame by dragging in Figma. At first it was hard not to know this.
08:25		yamasy1549	ダークモードも考慮いるんですか？
08:25		Kiara Translation	🇬🇧: Do you consider dark mode?
08:26		uetchy	いえ、デザインシステム側で両方対応する必要があるだけで、Webサイトの対応は任意です！
08:26		Kiara Translation	🇬🇧: No, the design system side only needs to support both, and the Web site is optional!
08:41		ogwata	整理ありがとうございます。 以下の部分だけコメントさせてください。 ogwataさんの提案では見出しや背景にそのカラーを使うとありますが、使える色数が限られている（あまり多くの色を使うのは見にくい）中で、リンク色とバッティングしてリンクが見にくくなってしまわないかちょっと心配です 補足説明させてください。 たとえばグローバルメニュー項目Aのカラーがff0000とした場合、AページのH1で、以下のように差し色としてff0000を使うことで、グローバルメニュー項目とリンクしていると視覚的に理解できます。 h1 {border-left: solid 20px #ff0000;} あるいは背景色としてff0000と同じ彩度で最も淡い#ffe6e6を使う方法もあるでしょう。 @akabeko さんも別のところでおっしゃっていますが、多くの色を使うのではなく、色数は絞りながらも統合的な色彩設計ができればと思います。
08:41		Kiara Translation	🇬🇧: Thank you for organizing. Let me comment only the following part. & gt; ogwata's suggestion is to use that color for headings and backgrounds, but the number of colors that can be used is limited (it is difficult to use too many colors), so it is difficult to see the link by batting with the link color I'm a little worried Please let me explain supplementally. For example, if the color of global menu item A is ff0000, you can visually understand that global menu page A is linked by using ff0000 as the replacement color in H1 of page A as shown below. You. h1 {border-left: inset 20px # ff0000;} Alternatively, you can use the lightest # ffe6e6 with the same saturation as ff0000 as the background color.  As you mentioned elsewhere, instead of using many colors, I hope that you can create an integrated color design while reducing the number of colors.
09:04		yamasy1549	ありがとうございます。見出しの目印とは違うのですが、パーマリンクが必要だと気づいたので、その色をページごとのカラーと同系色にしようと思います。 https://vivliostyle.slack.com/files/UJ734DS4V/FSKAKPAJF/image.png
09:04		Kiara Translation	🇬🇧: Thank you very much. It's different from the headline mark, but I realized that I needed a permalink, so I'm going to make that color similar to the color of each page.
09:37		ogwata	リンク色については、別スレッドの@akabeko さんと同意見です。 https://vivliostyle.slack.com/archives/CNR65K6KE/p1579593782072100?thread_ts=1579592980.070600&cid=CNR65K6KE 積極的に設定しない方がよいのではないでしょうか。 リンク色については歴史的な経緯や文化もあるので • 設定せずユーザー環境にまかせる • 設定するが「未読 = 青系」、「既読 = 紫系 or 淡い灰」のように一般的な色の系統を踏襲する のようにするのが無難だと思います。
09:37		Kiara Translation	🇬🇧: I agree with another thread about link colors. https://vivliostyle.slack.com/archives/CNR65K6KE/p1579593782072100?thread_ts=1579592980.070600&cid=CNR65K6KE Isn't it better not to set it aggressively?
09:40		yamasy1549	ページごとのカラーを適用するのはパーマリンクだけのつもりです
09:40		Kiara Translation	🇬🇧: Only permalinks are going to apply per-page color
09:41		yamasy1549	パーマリンクに既読未読はいらないと思ってこうしましたが、どうでしょうか……？
09:42		Kiara Translation	🇬🇧: I thought that permalinks did not require read or unread, but what about ...?
12:42		ogwata	すいません、「パーマネントリンクをページごとのカラーと同系色にする」という部分がよく理解できていません。 確認ですが、着色する部分は画像 https://files.slack.com/files-pri/TAE8V835Y-FSKAKPAJF/image.png の「Vivliostyle CLI」の部分ですね？　その場合、この部分をページごとのカラーにする意味が私にはよく分からないのです。 ここで「ページごとのカラー」とはグローバルメニュー項目と同義ですね。これを、例えば「Vivliostyle CLI」と同系色にした場合、読者に対してどのような効果・効用が期待できるのでしょう？ https://vivliostyle.slack.com/files/UJ734DS4V/FSKAKPAJF/image.png
12:42		Kiara Translation	🇬🇧: I'm sorry, I don't understand the part of "Make permanent links similar to the color of each page". As you can see, the part to be colored is the "Vivliostyle CLI" part of the image https://files.slack.com/files-pri/TAE8V835Y-FSKAKPAJF/image.png? In that case, I don't understand the meaning of making this part a color for each page. Here, "color per page" is synonymous with global menu item. If you make this a similar color to "Vivliostyle CLI", what effect and utility can you expect from readers?
12:43		yamasy1549	ごめんなさい、鎖マークのところをパーマリンクと言っていました！
12:43		Kiara Translation	🇬🇧: I'm sorry, the chain mark was called permalink!
12:52		ogwata	なるほど、「ページタイトルのパーマネントリンクのアイコン」なのですね。すいません、文字列と誤解していました。 ただ、パーマネントリンクのためのアイコンを、それ以外にページ識別の意味も持たせるのは、読者を混乱させませんか。 アイコンとは別に、「■」でも図形でも border-left でも、なにか識別専用の印を入れた方が整理できるような気がするのですが、いかがでしょう。
12:52		Kiara Translation	🇬🇧: Indeed, it's a "permanent link icon in the page title". I'm sorry, I misunderstood it as a string. But isn't it confusing readers to make the icons for permanent links also have the meaning of page identification? Apart from the icons, I feel that it is better to put a mark for identification only on “■”, figure, or border-left, but how about?
14:10		uetchy	🛠️ https://vivliostyle.slack.com/files/UK1GQ9TF0/FSX6M2A4D/screen_shot_2020-01-21_at_23.03.19.png
14:10		Kiara Translation	🇯🇵: ：hammer_and_wrench：